/* 給与管理システム 見た目の土台
 ・営業はスマホで見る → 担当画面はモバイル優先
 ・代表は一覧性が要る → 管理画面はデスクトップ密度
 ・金額は必ず tabular-nums（桁がずれると読み違える）
 ・「未入力」と「0円」は色で必ず違って見えること */

/* ★端末がダークのときブラウザが勝手に色を反転させる（Android Chrome の Auto Dark Theme）。
 警告の地色（ほぼ白）が黒寄りに変換され、赤文字との組み合わせが崩れる＝
 締切超過・未対応の申し送り・止まっている項目が読めなくなる。
 書類（renderInvoiceHtml）と同じく、画面本体にも入れる。
 ★ダークテーマを作るのではなく「ライトのまま出す」と宣言する。 */
:root{color-scheme:light}
:root{
  --bg:#f5f6f8; --card:#fff; --line:#e4e7eb; --line2:#eef0f3;
  --ink:#16191d; --ink2:#4a5158; --muted:#616973; /* 白背景で4.5:1以上（小さい注記に多用するため） */
  --hdr-h:52px;
  --accent:#12603f; --accent2:#0e4e33; --accent-w:#e8f2ed;
  --warn:#b42318; --warn-bg:#fef4f2; --warn-line:#f5cdc6;
  --ok:#067647; --ok-bg:#edfbf3; --ok-line:#b6ecd0;
  --pend:#a45c07; --pend-bg:#fff9ec; --pend-line:#f3ddb2;
  --r:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
 font:15px/1.65 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
 font-feature-settings:"palt"}
a{color:var(--accent)}
.num,td.num,th.num,.tnum{font-variant-numeric:tabular-nums}

/* ── 骨格 */
.wrap{max-width:1040px;margin:0 auto;padding:16px}
.wrap.wide{max-width:1320px}
.wrap.narrow{max-width:720px}
/* 対象案件の表は最小幅 769px あるが、入れ物は 658px
 （.wrap.narrow の 720px − padding）。そのままだと**右に119px はみ出し、「直接の知人」と
 「メモ」の2列がまるごと画面の外に出る**（macOSのオーバーレイスクロールバーなので、
 隠れている合図も出ない）。歩合率を加算する操作部品が、PCでは見つからなくなる。
 ★読む幅（本文720px）は変えず、**表のカードだけ**を画面幅に追従させる。 */
/* ★広げるのは【表の入れ物だけ】。カードごと広げると、同じページで1枚だけ縁が揃わず、
 いちばん読ませたい二重計上の警告が1行66文字級になり、入力欄も524pxになる。 */
/* ★761pxから効かせると 761〜779px で箱(729px)より表(743px)が広く、
 メモ列が18px隠れ、入力欄は22pxになる。
 全列が収まる最小幅（783px）から効かせる。 */
@media(min-width:783px){
 .wrap.narrow .card.dealcard .scroll.dt{
 width:min(1100px, calc(100vw - 32px)); max-width:none;
 margin-left:50%; transform:translateX(-50%); /* 親より広い箱を画面の中央に置く */
 }
}
/* ★窓幅 761〜830px では、メモ入力欄が 22〜26px に潰れて1文字しか見えなくなる
 （最大500文字を書かせる欄）。760px以下はカード表示に切り替わるので、この帯だけの穴。
 ★ただし 761px から効かせると、761〜888px で
   **メモ列そのものが右にはみ出して見えなくなる**（幅800px ではみ出し86px・
 macOSのオーバーレイなので隠れている合図も出ない）。
 列が全部入る幅からだけ効かせる。 */
/* ★889pxから効かせると 889〜910px で min-width が効いた瞬間に
 表(875px)が箱(857px)を超え、メモ列が22px隠れる。
 min-width を足しても全列が収まる幅（918px）から効かせる。 */
@media(min-width:918px){
  #tDeals td:last-child,#tDeals th:last-child{min-width:170px}
}
header{background:var(--accent);color:#fff;position:sticky;top:0;z-index:20}
header .wrap{display:flex;align-items:center;gap:8px;padding-top:11px;padding-bottom:11px}
header h1{font-size:15px;margin:0;font-weight:500;letter-spacing:.01em;white-space:nowrap}
header .sp{flex:1}
header .who{font-size:13px;color:#cfe5da;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:14em}
header button{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.26);
 padding:6px 11px;font-size:13px;border-radius:8px}
header button:hover{background:rgba(255,255,255,.24)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:14px 0}
.card>h2{font-size:14px;margin:0 0 4px;font-weight:500;letter-spacing:.01em}
.card>h2+.sub{margin:0 0 14px}
.sub{color:var(--muted);font-size:12.5px;margin:0 0 12px;line-height:1.6}

/* ── 入力 */
label{display:block;font-size:12.5px;color:var(--ink2);margin:12px 0 5px;font-weight:500}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
 background:#fff;color:var(--ink);font:inherit}
/* ★チェックボックスに padding と radius が乗ると歪む・押しにくい。源泉の要否など金額に効く項目で危ない。 */
/* ★一括操作（締める・書類をつくる・締めを解除）の対象を決める欄。素のままだと 13×17px で、
 スマホでは隣の行を選んで別人の書類が発行される（発行すると番号を消費し、取り消すと欠番が残る）。
 ★担当名のセルは「詳細を開く」ボタンなので、行全体をトグルにはしない。セルだけ広げる。 */
.pickcell{display:block;padding:13px 8px;margin:-13px -8px;cursor:pointer}
.pickcell input[type=checkbox]{width:20px;height:20px;margin:0}
input[type=checkbox],input[type=radio]{width:auto;height:17px;padding:0;border-radius:3px;
 accent-color:var(--accent);flex:0 0 auto;vertical-align:-2px}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px}
/* ★ボタンとリンクにも焦点の枠。無いとキーボードだけで操作する人（と Tab で辿る人）が
 いまどこにいるか分からない。
 :focus-visible なのでマウスで押したときには出ない。 */
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
 outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
header button:focus-visible{outline-color:#fff}
input:disabled,select:disabled{background:#f5f6f8;color:var(--muted)}
input.money{text-align:right;font-variant-numeric:tabular-nums}
button{font:inherit;padding:9px 15px;border:1px solid var(--line);border-radius:9px;background:#fff;
 color:var(--ink);cursor:pointer;white-space:nowrap}
button:hover{background:#f7f8f9}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:500}
button.primary:hover{background:var(--accent2)}
button.sm{padding:5px 10px;font-size:12.5px;border-radius:7px}
button.danger{color:var(--warn);border-color:var(--warn-line)}
/* ★opacity:.4 だと primary の白文字が 1.98:1 でほぼ読めない。色で「押せない」を出す。 */
button:disabled{cursor:not-allowed}
button:disabled,button.primary:disabled{background:#e7eaee;color:#71787f;border-color:#dce0e5;opacity:1;font-weight:400;box-shadow:none}
button.link{border:0;background:0;color:var(--warn);padding:2px 4px;text-decoration:underline;font-size:12.5px}
.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}

/* ── 表 */
/* ★overflow-x:auto を付けると、この箱が【スクロールの親】になる。すると中の
 thead th の position:sticky は「ページの上」ではなく「この箱の上」を基準にするので、
 箱が縦スクロールしない限り一切効かず、見出しがヘッダーの裏に潜る。
 ★そこで、この箱自身を縦スクロールの親にする（max-height を持たせ、見出しは top:0）。
 画面が狭いときは行が少なく高さも足りないので、広い画面だけに効かせる。 */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
/* ★.scroll は【全幅で】スクロールの親になるので、中の thead は
 この箱を基準に貼り付く。top:var(--hdr-h) のままだと見出しが66px下へずれ、
 1行目（＝最初の申込月）を38pxぶん白く覆う（スマホで起きる）。
 ★箱の中の見出しは常に top:0（画面幅によらず）。ヘッダー回避は箱の外の表だけの話。 */
.scroll thead th{top:0}
@media(min-width:761px){
 .scroll{max-height:min(70vh,720px);overflow-y:auto}
}
/* 横スクロールしても「誰の行か」を見失わない */
/* 9件の月で scrollHeight 823 / clientHeight 720＝
   **最後の案件と「合計」行が既定では画面に出ない**（スクロールバーも0px幅で合図なし）。
 締める直前に自分の合計を確かめる行なので、内側スクロールでも必ず残す。 */
.scroll tfoot td,.scroll tfoot th{position:sticky;bottom:0;background:var(--card,#fff);z-index:3}
.stick1 td:first-child,.stick1 th:first-child{position:sticky;left:0;background:#fff;z-index:4}
.stick1 thead th:first-child{z-index:6}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:9px 8px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:middle}
/* ★ヘッダー(sticky top:0 / z-index:20)と取り合うと、表の見出しがヘッダーの裏に隠れて消える。
 ヘッダーの高さぶん下げる。 */
thead th{font-size:12px;color:var(--muted);font-weight:500;white-space:nowrap;
 border-bottom:1px solid var(--line);position:sticky;top:var(--hdr-h);z-index:5;background:#fff}
/* ★担当詳細の表では見出しを固定しない。固定すると、スクロール位置によって
 1行目が見出しの裏に隠れ、「合計と行が合わない＝漏れ？」に見える
 （誤解を招く。表は短いので固定は不要）。 */
#detCard thead th{position:static}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tbody tr:hover{background:#f2f6f4}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tfoot th{border-top:1px solid var(--line);border-bottom:0;font-size:13px;color:var(--ink)}

/* ── バッジ / 状態 */
.badge{display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:999px;font-weight:500;
 white-space:nowrap;line-height:1.6}
.b-ok{background:var(--ok-bg);color:var(--ok)}
.b-pend{background:var(--pend-bg);color:var(--pend)}
.b-warn{background:var(--warn-bg);color:var(--warn)}
.b-mute{background:#e8ebee;color:#4a5158}
/* ★「あとで金額が動くかもしれない」状態は、単なる進行中とは別の色にする */
.b-caution{background:#fff2d9;color:#8a5300;box-shadow:inset 0 0 0 1px #efd09a}
.miss{color:var(--warn);font-weight:500}
.note{color:var(--muted);font-size:12.5px}
.hide{display:none !important}

/* ── 見出しの数字（担当のヒーロー） */
.hero{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin:14px 0}
.hero .lbl{font-size:12.5px;color:var(--muted);margin:0}
.hero .big{font-size:38px;font-weight:500;letter-spacing:-.02em;line-height:1.2;margin:2px 0 0;
 font-variant-numeric:tabular-nums}
.hero .big.miss{font-size:22px}
.hero .meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line2)}
.hero .meta div{min-width:88px}
.hero .meta .k{font-size:11.5px;color:var(--muted)}
.hero .meta .v{font-size:15px;font-variant-numeric:tabular-nums;margin-top:1px}

/* ── やることリスト */
.todo{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r);padding:14px 16px;margin:14px 0}
.todo h3{margin:0 0 8px;font-size:13px;color:var(--warn);font-weight:500}
.todo ul{margin:0;padding-left:18px}
.todo li{font-size:13.5px;color:var(--warn);margin:3px 0}
.todo.ok{background:var(--ok-bg);border-color:var(--ok-line)}
.todo.ok h3,.todo.ok li{color:var(--ok)}
.todo.info{background:var(--pend-bg);border-color:var(--pend-line)}
.todo.info h3,.todo.info li{color:var(--pend)}

/* ── 率カード（申込月ごと） */
.rates{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.rc{border:1px solid var(--line);border-radius:11px;padding:14px}
.rc .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rc .ym{font-size:12.5px;color:var(--muted)}
.rc .pct{font-size:26px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.1}
.rc .pct.zero{color:var(--muted)}
.rc .pct.na{font-size:16px;color:var(--warn)}
.rc .amt{font-size:12.5px;color:var(--ink2);margin-top:6px;font-variant-numeric:tabular-nums}
.bar{height:6px;background:#eef0f3;border-radius:99px;margin:11px 0 7px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.rc .next{font-size:12.5px;color:var(--ink2);line-height:1.5}
.rc .next b{color:var(--accent);font-variant-numeric:tabular-nums}
.rc .gain{display:inline-block;margin-top:5px;font-size:12.5px;background:var(--accent-w);color:var(--accent);
 padding:2px 9px;border-radius:999px;font-variant-numeric:tabular-nums}
.rc .src{font-size:11.5px;color:var(--muted);margin-top:8px}

/* ── 率の推移（これまでの動き）
 ★既定は畳む。毎月見る場所ではないが、「先月と違う」と思った時にだけ開けば答えがある、
 という置き方にする。開きっぱなしだと率カードが縦に伸びて本来の数字が押し出される。 */
.hist{margin-top:9px;border-top:1px solid var(--line2);padding-top:7px}
.hist>summary{font-size:12px;color:var(--muted);cursor:pointer;list-style:none;padding:2px 0}
.hist>summary::-webkit-details-marker{display:none}
.hist>summary::before{content:'▸ ';font-size:10px}
.hist[open]>summary::before{content:'▾ '}
.ht{width:100%;font-size:12px;margin-top:6px;display:block;overflow-x:auto;max-width:100%}
.ht th,.ht td{padding:4px 6px;border-bottom:1px solid var(--line2)}
.ht thead th{font-size:11px;color:var(--muted);font-weight:500;position:static;background:0;border-bottom:1px solid var(--line)}
.ht td.hd{color:var(--muted);white-space:nowrap}
.ht td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
/* 増減は本文と同じ色。赤にすると「異常」に読める（増えたのに赤は誤解を生む）。 */
.hdiff{display:block;font-size:10.5px;color:var(--muted)}
/* ★「仮」は【あとで率が変わり、差額が翌月の支給に乗る】ことを知らせる唯一の印。
 10px はスマホの実寸で約2.6mm。読めないと翌月「勝手に減った」になる。
 お金の意味が乗っている文字に10pxは使わない。 */
.hk{display:inline-block;margin-left:4px;font-size:11.5px;background:var(--pend-bg);color:var(--pend);
 padding:0 4px;border-radius:3px;vertical-align:1px}

/* ── 合計の行 */
.tot{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line2);font-size:14px}
.tot:last-child{border-bottom:0}
.tot .v{font-variant-numeric:tabular-nums;white-space:nowrap}
.tot.uchi{color:var(--muted);font-size:12.5px;border-bottom:0;padding:3px 0 3px 14px}
.tot.uchi + .tot:not(.uchi){border-top:1px solid var(--line2)}
.tot.big{border-top:2px solid var(--ink);border-bottom:0;margin-top:6px;padding-top:13px;font-size:19px;font-weight:500}

/* ── タブ（管理画面） */
.tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);margin:6px 0 0;
 -webkit-overflow-scrolling:touch}
.tabs button{border:0;background:0;border-bottom:2px solid transparent;border-radius:0;
 padding:11px 14px;color:var(--muted);font-size:13.5px;white-space:nowrap}
.tabs button:hover{background:0;color:var(--ink)}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:500}
.tabs button .n{display:inline-block;margin-left:6px;font-size:11px;background:var(--warn-bg);color:var(--warn);
 padding:1px 7px;border-radius:999px;font-variant-numeric:tabular-nums}

/* ── 管理のサマリー */
/* ★下地の色を敷かない。枚数が列数の倍数でないと、余った枠に下地が出て
 「中身のない灰色のタイル」に見える（375pxで3枚＝2列のときなど）。
 区切りはセル側の枠線で描く。 */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0;background:transparent;
 border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.kpi{background:#fff;padding:14px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.kpi .k{font-size:11.5px;color:var(--muted)}
.kpi .v{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;margin-top:2px;line-height:1.2}
/* ★補足は改行して置く。数字の隣に流すと 375px で「3／全全員 未反映5名は／シートの🔒待ち」と
 途中で折り返し、数字と説明の区別がつかない */
.kpi .v small{display:block;font-size:12px;color:var(--muted);font-weight:400;margin:2px 0 0;line-height:1.5}
.kpi .v .late{color:var(--warn)} /* 締切当日・超過だけ赤。KPIが締切の唯一の置き場 */
.kpi .v .u{font-size:13px;color:var(--muted);font-weight:400;margin-left:3px} /* 分母・単位は数字の隣に置く */

/* ── パスワード表示 */
.pw{background:#16191d;color:#7ee0a8;padding:13px;border-radius:9px;
 font:17px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em;
 word-break:break-all;user-select:all;margin-top:8px}

/* ── 案件カード（スマホ用） */
.dl{display:none}
@media(max-width:760px){
 /* ★375px幅で、指で押すものは 44px 以上にする。
 ・発行した書類を開く「開く」リンク（自分の請求書を見に行く唯一の口）
 ・折りたたみの見出し（歩合率の説明・その他費用・案件の一覧）
 全員がスマホで毎月押す面なので、押し損ねると「押したのに開かない」になる。
 ★幅は広い（画面いっぱい）ので、足りないのは高さだけ。高さだけ足す。 */
 /* ★パスワードを表示するトグルの当たり判定を、ほかの押しどころ（45〜46px）に揃える。
 運用初日は全員が12文字のランダム英数字を手で打つ日で、**5回外すと30分ロック**。
 それを避けるための唯一の道具なので、小さいままにしない。 */
 .pwtoggle{min-height:44px;align-items:center}
 .todo a, .todo li a{display:inline-block;min-height:44px;line-height:44px;padding:0 10px}
 details > summary{min-height:44px;display:flex;align-items:center;gap:6px}
 .hist > summary{min-height:44px}
 .why > summary{min-height:44px}
}
@media(max-width:760px){
 .wrap{padding:12px}
 .card{padding:15px;border-radius:11px}
 .dt{display:none}
 .dl{display:block}
 .hero .big{font-size:32px}
 .rates{grid-template-columns:1fr}
}
.dcard{border:1px solid var(--line);border-radius:11px;padding:13px;margin-bottom:10px}
.dcard .h{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.dcard .nm{font-size:15px;font-weight:500}
.dcard .amt{font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dcard .kv{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink2);margin-top:5px}
.dcard .kv span:last-child{font-variant-numeric:tabular-nums}
.dcard .costrow{display:flex;align-items:center;gap:8px;margin-top:10px;
 padding-top:10px;border-top:1px solid var(--line2)}
.dcard .costrow label{margin:0;flex:1}

.costcell{width:104px;text-align:right;background:#f0f6ff;border-color:#c9dcf5}
.costcell:focus{background:#fff}

/* ── メール送付の下書き表示。★実際に届く文面をそのままの改行で見せる */
table.kv{border-collapse:collapse;font-size:13px}
table.kv th{text-align:left;color:var(--muted);font-weight:500;padding:5px 12px 5px 0;vertical-align:top;white-space:nowrap}
table.kv td{padding:5px 0}
pre.mailbody{background:#f7f8fa;border:1px solid var(--line);border-radius:8px;
 padding:14px 16px;margin:0;white-space:pre-wrap;word-break:break-word;
 font:13px/1.85 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif}

/* ★全員の状況だけ1列目が幅28pxのチェックボックス。固定しても空白が残るだけで
 「誰の行か」が分からない。担当名（2列目）も一緒に固定する。 */
#tOv td:nth-child(2),#tOv th:nth-child(2){position:sticky;left:36px;background:#fff;z-index:4}
#tOv thead th:nth-child(2){z-index:6}

/* ── 工程バー（今月あと何をすればいいか）
 ★11タブのどれを開くかを毎回組み立て直さずに済むように、作業の順に並べる。 */
/* PCで clientWidth 688 / scrollWidth 832＝
   **6枚目「確認して経理へ」が右に隠れて見えない**（スクロールバーの合図も無い）。
 「いま何合目か」を示す部品なのに、最後の工程が存在しないように見える。折り返す。 */
.flow{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding-bottom:4px}
.flow .step{min-width:150px}
.step{flex:1 1 0;min-width:132px;display:flex;flex-direction:column;gap:3px;align-items:flex-start;
 font:inherit;text-align:left;cursor:pointer;padding:10px 12px;border-radius:10px;
 border:1px solid var(--line);background:var(--card)}
.step:hover{border-color:var(--accent)}
.step .sn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
 border-radius:50%;font-size:12px;font-weight:500}
.step .stop{display:flex;align-items:center;gap:6px}
.step .sdone{font-size:11px;color:var(--ok);font-weight:500}
.step .snow{font-size:11px;color:var(--warn);font-weight:600}
.step .sl{font-size:13.5px;font-weight:500}
/* ★毎月使わないタブは畳む。開いたときだけ場所を取る。 */
.tgmore>summary{cursor:pointer;font-size:12.5px;color:var(--muted);padding:8px 2px;min-height:44px;
 display:flex;align-items:center}
.tgmore[open]>summary{color:var(--ink)}
/* ★スマホ幅（375px・担当の画面）: .step は <button> なので上の button{white-space:nowrap}
 を継ぎ、「代表の確認待ちです（こちらの操作はありません）」が折り返さず 430px まで伸びて
   **ページ全体が横スクロール**してしまう。
 ★段の中は折り返す。2×2 の grid も minmax(0,1fr) にして、中身の最小幅で列が膨らまないようにする。 */
.step{white-space:normal}
.step .sh{font-size:11.5px;color:var(--muted);min-height:1.2em;overflow-wrap:anywhere}
.step .sl{overflow-wrap:anywhere}
.step.now{border-color:var(--warn);background:var(--warn-bg)}
.step.now .sn{background:var(--warn);color:#fff}
.step.now .sh{color:var(--warn)}
.step.done .sn{background:var(--ok-bg);color:var(--ok)}
.step.done{opacity:.72}
.step.now{box-shadow:0 0 0 2px var(--warn-bg)}

/* ★iOSは16px未満の入力欄にフォーカスすると必ず画面を拡大する。案件が8件あれば8回。 */
@media(max-width:760px){
 input,select,textarea{font-size:16px}
 button.link{padding:10px 12px;font-size:13px} /* 指で押せる大きさに */
 /* ★.sm とヘッダーのボタンは約29pxで、そのままでは指の目安44pxに届かない。
 主要動線（伝える・まとめて確認・書く）が全部 .sm なので、スマホでは大きくする。 */
 /* ★375px幅では padding だけだと 43.45px で、狙った44pxに
     **0.55px 届かない**。文字サイズや行間で変わるので、高さそのものを下限で決める。 */
 button.sm{padding:10px 14px;font-size:13px;min-height:44px}
 header button{padding:9px 12px;min-height:44px}
 /* ★工程バーの各段も押せる（本物のボタンまで案内する導線）。そのままでは36.6pxしかない。 */
 .flow .step{min-height:44px}
 /* ★工程バーが横に溢れて「今ここ」が画面外に出る。スマホでは縦に積む。 */
 .flow{display:grid;grid-template-columns:1fr;gap:6px;overflow-x:visible}
 .flow .step{min-width:0;flex:none}
}
/* まだ確定していない（代表の締め待ち）は、事故の赤ではなくグレー */
.big.pending{color:var(--muted)}
/* 経費をまだ確認していない欄 */
.costcell.unset{border-color:#efd09a;background:#fff8ec}
.step.wait{opacity:1;background:#fafbfc;border-color:var(--line2)}
.step.wait .sl{color:var(--ink2)}
.step.wait .sn{background:var(--line);color:#4a5158} /* var(--muted) だとコントラスト4.48でAA未満 */

/* ── タブを役割で分ける
 ★毎月使うものと年に数回のものが同列に並んでいると、
 どれを開けばいいか毎回考えることになる。 */
.tabgroups{display:flex;flex-direction:column;gap:6px;margin:16px 0 0;border-bottom:1px solid var(--line);padding-bottom:10px}
.tg{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.tg .tabs2{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.tgl{font-size:11px;color:var(--muted);min-width:104px;letter-spacing:.02em}
.tg button{font:inherit;font-size:13.5px;padding:6px 12px;border-radius:7px;border:1px solid transparent;
 background:none;color:var(--ink2);cursor:pointer;white-space:nowrap}
.tg button:hover{background:var(--line2)}
.tg button.on{background:var(--accent);color:#fff;font-weight:500}
/* この画面は何で、いつ使うか */
.guide{margin:14px 0 -2px;padding:10px 14px;border-left:3px solid var(--accent);background:var(--card);
 border-radius:0;font-size:13px;color:var(--ink2);line-height:1.75}
.guide b{display:block;font-size:12px;color:var(--accent);font-weight:500;margin-bottom:2px}
@media(max-width:760px){
 /* ★タブは折り返さず横スクロール（折り返すと12個が3行×約108px＝323pxを占める）。
 ★グループ名（.tgl）は行の外へ出す。中に置くと min-width:100% が全幅を取り、
 nowrap の行でボタンが全部押し出されて【1つも見えなくなる】。 */
 .tg{display:block}
 .tgl{display:block;min-width:0;margin:0 0 2px;padding-left:2px}
 .tg .tabs2{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:4px}
 .tg button{white-space:nowrap;flex:0 0 auto}
 /* ★終わった工程を display:none で消すと、工程バーが
 「2 3 4 5」から始まり、狭い画面では
 「①は終わったのか、そもそも無いのか」が読めない。
 ★消さずに1行へ畳む（81px→約35px）。番号の並び1〜5は常に残す。 */
 .flow .step.done{flex-direction:row;align-items:center;gap:8px;padding:7px 10px}
 .flow .step.done .sh{display:none}
 .flow .step.done .sl{font-size:12.5px;color:var(--muted);font-weight:400}
 /* ★タブ12個が36pxだと、隣を押して設定画面（歩合率の表・自社と文面）へ飛びやすい。
 指の目安44pxに寄せる。
 ★このルールは .tg button の定義より後ろに置くこと（同じ詳細度なので、前に置くと負ける）。 */
 .tg button{padding:11px 12px}
}

/* ── 毎月の流れ */
.howto{margin:14px 0 0;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.howto summary{padding:11px 16px;cursor:pointer;font-size:13.5px;color:var(--accent);font-weight:500;list-style:none}
.howto summary::-webkit-details-marker{display:none}
.howto summary::before{content:'▸ ';font-size:12px}
.howto[open] summary::before{content:'▾ '}
.howto[open] summary{border-bottom:1px solid var(--line2)}
.hw{padding:14px 16px;display:grid;gap:11px}
.hwrow{display:flex;gap:11px;align-items:flex-start}
.hwno{flex:0 0 22px;height:22px;border-radius:50%;background:var(--accent-w);color:var(--accent);
 display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:500}
.hwrow b{display:block;font-size:13.5px;font-weight:500}
.hwrow span{display:block;font-size:12.5px;color:var(--muted);line-height:1.75}

/* ★飛んだ先で「これを押す」を一瞬だけ光らせる。着地しただけだと、また探すことになる。
 ★色だけで示さない（枠も動かす）。色の見え方には個人差がある。 */
@keyframes flashHit {
 0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
 20%, 60% { box-shadow: 0 0 0 4px var(--warn-bg); border-color: var(--warn); }
}
.flash { animation: flashHit 1.6s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; box-shadow: 0 0 0 4px var(--warn-bg); } }

/* 説明の折りたたみ。★毎月読むものではないので既定は閉じる。 */
details.why { margin: 0 0 12px }
details.why > summary { cursor: pointer; color: var(--accent); font-size: 13.5px; padding: 4px 0 }
details.why > summary::marker { color: var(--muted) }
details.why .sub { margin-top: 6px }
details.fold > summary { font-weight: 500; padding: 8px 0 }

/* 送付先メールの入力欄。★人数が増えても今月の作業を画面の外へ押し出さないよう詰める
 （詰めないと全員で1画面ぶん占める）。押しやすさは保つので高さは36px以上にする。 */
table.nomail td { padding: 2px 8px 2px 0; vertical-align: middle }
table.nomail input { margin: 0; padding: 6px 10px; min-height: 36px; min-width: 240px }
/* ★iPhoneでは「名前＋240pxの入力欄」が横幅を超え、画面ごと横に流れる。
 横に流れると保存ボタンが画面の外へ出て、入れたのに保存できない。狭い画面では縦に積む。 */
@media(max-width:560px){
 table.nomail, table.nomail tbody, table.nomail tr, table.nomail td { display: block; width: 100% }
 table.nomail td { padding: 0 }
 table.nomail tr { margin-bottom: 10px }
 table.nomail input { min-width: 0; width: 100%; margin-top: 3px }
}

/* 年間の金額セル。★赤（警告色）だと「異常」に見える。押せることだけ伝えたいので
 本文と同じ色にして、下線は薄く。数字なので右寄せ・等幅の見え方は保つ。 */
button.link.ycell { color: inherit; font-size: inherit; padding: 2px 0;
 text-decoration: underline; text-decoration-color: var(--muted);
 text-underline-offset: 3px; font-variant-numeric: tabular-nums }
button.link.ycell:hover { text-decoration-color: var(--accent); color: var(--accent) }

/* どこに何があるか（地図）。★1行＝1画面。名前・中身・いつ開くか を横に並べる。 */
.mapg{margin:14px 0 6px;font-size:11.5px;color:var(--muted);font-weight:600}
.mapg:first-child{margin-top:0}
/* ★white-space:normal は必須。buttonの既定が nowrap で、それを継ぐと
 狭い画面で1カラムにしても中身が折り返せず、行が725pxまで伸びて画面ごと横に流れる。 */
.maprow{display:grid;grid-template-columns:118px 1fr 132px;gap:10px;align-items:baseline;
 width:100%;text-align:left;border:0;border-bottom:1px solid var(--line2);background:0;
 padding:7px 6px;cursor:pointer;border-radius:6px;white-space:normal}
.maprow>span{min-width:0}
.maprow:hover{background:var(--accent-w)}
.maprow .mn{font-weight:600;font-size:13.5px;color:var(--accent)}
.maprow .mw{font-size:12.5px;color:var(--ink2)}
.maprow .mt{font-size:11.5px;color:var(--muted);text-align:right}
/* ★狭い画面でだけ縦積みにする。760pxで折ると、ふつうのノートPCでも
 1画面＝3行になり、12行で地図がスクロールの塊になる。 */
@media(max-width:560px){
 .maprow{grid-template-columns:1fr;gap:1px}
 .maprow .mt{text-align:left}
}
/* 件数バッジ。★warnは「手当てが要る」、無印は「順番待ち」。 */
.n{display:inline-block;min-width:17px;padding:0 5px;margin-left:4px;border-radius:9px;
 background:var(--line);color:var(--ink2);font-size:11px;line-height:17px;text-align:center;font-weight:600;
 vertical-align:middle}
.n.warn{background:var(--warn);color:#fff}
.tg button.on .n{background:rgba(255,255,255,.28);color:#fff}

/* 申し送り（担当→代表）。★書いたものが画面に残らないと、伝わったか分からない。 */
.note1{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;
 border-left:3px solid var(--warn);background:var(--warn-bg);
 padding:7px 10px;margin:8px 0 0;border-radius:0 6px 6px 0;font-size:12.5px}
.note1.done{border-left-color:var(--ok);background:var(--ok-bg)}
.note1 .nb{flex:1 1 200px;color:var(--ink)}
.note1 .nw{font-size:11.5px;color:var(--warn);white-space:nowrap}
.note1 .nr{font-size:11.5px;color:var(--ok);white-space:nowrap}
.noteadd{margin-top:8px}

/* いま手当てが要ること。★1行＝1件。件数・何が・どこへ を横に並べる。 */
.tdrow{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line2)}
.tdrow:first-of-type{border-top:0}
/* ★丸印だけ。数字は工程バー（1〜5）だけが持つ＝同じ見た目が2つの意味を持たないようにする */
.tdn{flex:0 0 auto;width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--muted)}
.tdn.warn{background:var(--warn)}
.tdn.mute{background:var(--line)}
.tdb{flex:1 1 auto;min-width:0;font-size:13px}
.tdb b{display:block;font-size:13.5px;margin-bottom:2px}
.tdb ul{margin:4px 0 0;padding-left:18px}
.tdrow .sm{flex:0 0 auto;align-self:center}
.hwh{font-size:12.5px;color:var(--muted);margin:18px 0 4px;border-top:1px solid var(--line2);padding-top:14px}
/* やること行の中に畳んで置く入力欄。★開くまで1行ぶんしか場所を取らない。 */
details.inl > summary{cursor:pointer;color:var(--accent);font-size:12.5px;margin-top:6px;font-weight:600}
details.inl[open] > summary{margin-bottom:2px}

/* 申し送りのその場入力。★promptだとiPhoneで1行＋誤キャンセルで全文消える。 */
.notefm{margin-top:8px}
.notefm textarea{width:100%;font-size:16px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
 font-family:inherit;resize:vertical}

/* ── いまやること1つだけのバー（担当画面・下固定） */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:15;background:rgba(255,255,255,.96);
 border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.06);backdrop-filter:blur(6px);
 padding-bottom:env(safe-area-inset-bottom)}
.stick .wrap{display:flex;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px}
.stick #stickLbl{flex:1;font-size:13px;color:var(--ink2);line-height:1.4}
.stick #stickBtn{white-space:nowrap}
/* ★最悪ケース（説明が3行に折れるとき）で75.59px＝余裕0.41px。
 実機のフォントや文字サイズ拡大で確実に足りなくなる。バーは合計カード表示中に
 自動で消えるので、広げても余白は見えない。 */
body.has-stick{padding-bottom:96px}
/* ── 歩合率は畳める箱（要約は常に見える） */
.ratesbox>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ratesbox>summary::-webkit-details-marker{display:none}
.ratesbox>summary::after{content:'開く';font-size:12px;color:var(--accent);margin-left:auto}
.ratesbox[open]>summary::after{content:'閉じる'}
.ratesbox .rchip{display:inline-block;background:var(--accent-w);color:var(--accent2);border-radius:999px;padding:1px 9px;font-size:12.5px;margin:2px 4px 2px 0;font-variant-numeric:tabular-nums}
/* ── 案件カードの「気になる点を伝える」は文字リンク（9枚並ぶとボタンは騒がしい） */
.dl .noteadd .addnote{background:none;border:0;color:var(--accent);text-decoration:underline;font-size:13px;box-shadow:none;
 /* ★見た目は文字リンクのまま、指で押せる高さ（44px）を確保する（そのままでは25px） */
 padding:12px 4px;min-height:44px;display:inline-flex;align-items:center}
.ratesbox>summary h2{font-size:14px;margin:0;font-weight:500;letter-spacing:.01em}
.ratesbox>summary .note{flex:1 1 100%;margin-top:4px}

/* ── ヘッダーのメニュー（まれに押すものをしまう） */
.menu{position:relative}
#btnMenu{font-size:18px;line-height:1;padding:10px 12px;min-height:44px;min-width:44px;letter-spacing:.1em}
.menu-pop{position:absolute;right:0;top:calc(100% + 6px);min-width:180px;background:var(--card);border:1px solid var(--line);
 border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;display:flex;flex-direction:column;gap:2px;z-index:30}
.menu-pop button{background:none;border:0;color:var(--ink);text-align:left;padding:10px 12px;border-radius:8px;font-size:14px;width:100%}
.menu-pop button:hover{background:var(--accent-w)}
/* ── 工程バー: スマホは 2×2 の小型（縦1列だと4枚で1画面を食う） */
@media(max-width:760px){
 .flow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
 .flow .step{padding:8px 10px;gap:2px}
 .step .sl{font-size:12.5px}
 .step .sh{font-size:11px}
}

/* パスワード変更・ログイン画面では下固定バーを出さない */
#vMonth.hide ~ #stick{display:none}

/* ★スマホでの指の目安44px。セレクトと主要ボタンの高さを揃える（41px→44px） */
@media(max-width:760px){
 select,input.money,#ymSel{min-height:44px}
 .noteadd .addnote{min-height:44px}
}

/* ── 管理: 担当の詳細の操作行は下に貼り付ける（案件が多い月はボタンが画面外に沈むため） */
#detail .actbar{position:sticky;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
 border-top:1px solid var(--line);margin:16px -18px -18px;padding:12px 18px;z-index:10;
 display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* 一括操作: 取り返しのつかない「締めを解除」を右端に離す */
#bulkReopen{margin-left:auto}

/* ★案件カード（.dl）は760px以下だけなので、その折りたたみも同じ条件にする（PCで開いても空になるため） */
#dealFold{display:none}
@media(max-width:760px){ #dealFold{display:block} }
/* パスワード変更画面では下固定バーぶんの余白を残さない */
body.pw-open{padding-bottom:0}

/* ── その場で書ける小さな窓（prompt の置き換え） */
.modal-bg{position:fixed;inset:0;background:rgba(16,20,24,.42);z-index:60;display:flex;align-items:center;
 justify-content:center;padding:16px;overflow:auto}
.modal{max-width:460px;width:100%;margin:0}
.modal textarea{width:100%;min-height:80px;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
@media(max-width:760px){ .modal-bg{align-items:flex-end;padding:0} .modal{border-radius:14px 14px 0 0;max-width:none} }

/* ── 管理: 月切替の右側の道具箱（広い画面では開いたまま・狭い画面では畳む） */
.tools{display:contents}
.tools>summary{display:none}
@media(max-width:760px){
 .tools{display:block;width:100%}
 .tools>summary{display:list-item;cursor:pointer;font-size:13px;color:var(--accent);padding:6px 2px}
 .tools .row{margin-top:6px}
}

/* ── 取り込みもれの案件を手で足す
 ★入力欄が9つある。1列に並べるとスマホで縦に長くなりすぎ、PCでは横が空く。
 「名義」「なぜ足すのか」だけ全幅にして、金額は2列に畳む。 */
.addgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.addgrid label{margin:0;display:block;font-size:12.5px;color:var(--ink2)}
.addgrid label .note{display:block;font-size:10.5px;line-height:1.5;margin:0}
.addgrid label input,.addgrid label select{margin-top:3px}
.addgrid .wide{grid-column:1 / -1}
@media(max-width:520px){.addgrid{grid-template-columns:1fr}}
.actrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* 手入力の取り消しボタン。行の中に置くので、目立たせない（誤爆させない） */
button.ghost{border-color:var(--line);color:var(--ink2);background:#fbfcfd}
button.ghost:hover{background:#f2f4f6;color:var(--warn);border-color:var(--warn-line)}

/* ── 締切（担当の画面）。★実際に締めるのは本人なので、本人の画面にも締切を出す。
 期限は工程バーの真上に置く（次にやることの隣が一番読まれる）。 */
/* 締切と振込予定日は「いつまでに → いつ入る」で1つの話。横に並べ、入らなければ塊のまま折る。
 ★クラス名は .dl にしない。案件カードの入れ物が既に <div class="dl" id="dealList"> で、
 空いていそうな2文字が【既に使われている】。white-space:nowrap が
 その一覧に効くと、スマホ画面が横に121pxはみ出す。 */
.herodates{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:4px;font-weight:400}
.herodates .pay1{white-space:nowrap;font-size:13px;color:var(--muted)}
.dlchip{display:inline-block;font-size:12.5px;padding:2px 9px;border-radius:999px;white-space:nowrap;
 background:#eef1f4;color:var(--ink2);border:1px solid var(--line)}
.dlchip.near{background:#fff5e6;color:#8a5a00;border-color:#f0d9a8;font-weight:500}
.dlchip.over{background:#fdeceb;color:var(--warn);border-color:var(--warn-line);font-weight:500}
.dlchip.wait{opacity:.75}

/* 今月分がまだ出ていない、を伝える1行（担当画面・支給月セレクタの直下） */
.ymnote{margin:8px 0 0;padding:9px 12px;border-radius:9px;font-size:13px;line-height:1.7;
 background:#eef4fb;border:1px solid #cfe0f2;color:#1f4d7a}
.ymnote .note{color:#4a6f97;font-size:12px;margin-top:2px}

/* 保存できたことを色以外でも伝える（色だけだと、色が分かりにくい人と読み上げに何も届かない） */
.savedmark{margin-left:8px;font-size:11.5px;color:var(--ok);white-space:nowrap}

/* 止まっている理由の「他N件」。★title の中だけだとスマホでは永久に読めない（代表は外出先で見る） */
.whymore{display:inline}
.whymore>summary{display:inline;cursor:pointer;list-style:none}
.whymore>summary::-webkit-details-marker{display:none}
.whymore>ul{margin:6px 0 0;padding-left:18px;font-size:12px;color:var(--ink2);line-height:1.7}

/* 申し送りの入力が足りないときの指摘。★押した場所の隣に出す（alert は離れた場所で叱る） */
.nmsg{margin-top:6px;font-size:12.5px;color:var(--warn);min-height:1px}

/* ── きょうやること（管理トップのタスクカード）
 ★「いまここ」1行だけが濃く、済みと順番待ちは静かに。数字は工程バーと同じ変数から。 */
.today{padding:0;overflow:hidden}
.today .thead{display:flex;align-items:center;gap:12px;padding:13px 16px 11px;border-bottom:1px solid var(--line2)}
.today .thead b{font-size:14.5px}
.today .tsum{font-size:12px;color:var(--muted);white-space:nowrap}
.tprog{display:flex;gap:3px;flex:1;max-width:200px;margin-left:auto}
.tprog i{height:6px;flex:1;border-radius:99px;background:var(--line)}
.tprog i.d{background:var(--ok)}
.tprog i.n{background:var(--pend)}
.trow{display:flex;align-items:center;gap:12px;padding:9px 16px;border-top:1px solid var(--line2)}
.trow .tn{flex:0 0 26px;height:26px;border-radius:99px;display:flex;align-items:center;justify-content:center;
 font-size:13px;font-weight:600;background:var(--pend-bg);color:var(--pend);font-variant-numeric:tabular-nums}
.trow.done{padding:4px 16px;color:var(--muted);font-size:12.5px;gap:9px}
.trow.done .tn{background:transparent;color:var(--ok);flex-basis:20px;height:20px;font-size:13px}
.trow.wait2{padding:4px 16px;color:#9aa1a9;font-size:12.5px;gap:9px}
.trow.wait2 .tn{background:transparent;border:1.5px dashed var(--line);color:#b3b9c0;flex-basis:20px;height:20px;font-size:12px}
.trow.now{background:linear-gradient(to right,var(--accent-w),rgba(232,242,237,0) 75%);
 border-left:3px solid var(--accent);padding:13px 16px 13px 13px}
.trow.now .tn{background:var(--accent);color:#fff}
.trow.now.you .tn{background:var(--warn)}
.trow .tl{flex:1;min-width:0}
.trow .tl b{font-size:13.5px}
.trow .tl .tt{display:block;font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--pend);margin-bottom:1px}
.trow.now .tl .tt{color:var(--accent)}
.trow.now.you .tl .tt{color:var(--warn)}
.tchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.tchip{font-size:11.5px;line-height:1.5;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:1px 9px;color:var(--ink2);white-space:nowrap}
.tchip.more{border-style:dashed;color:var(--muted)}
.trow>button{white-space:nowrap;flex:0 0 auto}
.tanom{margin:8px 16px 13px;border:1px solid var(--pend-line);background:var(--pend-bg);border-radius:10px;padding:9px 12px;font-size:12.5px}
.tanom b{color:var(--pend)}
@media (max-width:560px){
 .trow.now{flex-wrap:wrap}
 .trow.now>button{flex:1 0 100%;margin-left:39px;padding:9px 12px}
}


/* ── ★歩合率の表（工程1「歩合率を確認する」で本人が見る表）
 375px では、何もしないと内容428px / 見える327px ＝ 101pxが画面外で【歩合の列が1pxも見えない】。
 iOS Safari はスクロールバーを操作中しか出さないので、本人は歩合を見ないまま
 「この歩合率で確認しました」を押せてしまう。工程そのものが成立しない。
 ★数字の列は右寄せ（.r）＋見出しは折り返して幅を詰める。 */
.tbl .r,.tbl th.r{text-align:right}
#rateList thead th{white-space:normal} /* 「率のもとになる売上」を2行に折る */
@media(max-width:560px){
  #rateList table{font-size:12.5px}
  #rateList th,#rateList td{padding:8px 5px}
  #rateList .note{font-size:11px}
}
/* 375px（iPhone標準幅）でも最後の「歩合」列まで収まりきるまで詰める。
 無対策428px → 折返し+右寄せで343px → ここで327px以下（はみ出しゼロ）。 */
@media(max-width:420px){
  #rateList th,#rateList td{padding:8px 3px}
  #rateList table{font-size:12px}
}

/* ★手入力の入口に出す注意（名義の表記ゆれ＝二重計上の入口）。
 目立たないと読まれないので、既存の .todo と同じ強さの黄色い箱にする。 */
.warnbox{background:var(--warn-bg);border:1px solid var(--warn-line);border-left:4px solid var(--warn);
 border-radius:var(--r);padding:11px 13px;font-size:13px;line-height:1.7}
.warnbox b{color:var(--warn)}


/* ★代表が担当の画面を見ているときの帯。見失うと本人の代わりに
 締めてしまい、本人はもう直せない。画面のいちばん上に固定で出す。 */
.viewas{position:sticky;top:0;z-index:60;background:#b42318;color:#fff;
 padding:9px 14px;font-size:13.5px;font-weight:600;line-height:1.5;text-align:center}
.viewas a{color:#fff;text-decoration:underline;margin-left:8px}

/* ★直接の知人（自己開拓＝歩合率に設定の点数を加算）とメモ */
.ctr{text-align:center}
/* ★指で押す（素のままだと13pxで狙いにくい）。59行目の共通ルール（input[type=checkbox]
 は width:auto）が効くので、同じ形の指定（.pickcell と同格）で上書きする。 */
input[type=checkbox].dfchk{width:22px;height:22px;accent-color:var(--accent);cursor:pointer;margin:0}
.dfwrap,.ctr{min-height:44px}
.dfrow .dfwrap{padding:11px 0}
td.ctr{padding:0}
td.ctr .dfchk{margin:11px auto;display:block}
.dfchk:disabled{cursor:not-allowed;opacity:.5}
.dfrow{align-items:center}
.dfwrap{display:flex;align-items:center;gap:8px}
.dfnote{font-size:11.5px;color:var(--accent);font-weight:600;white-space:nowrap}
/* .costrow は display:flex・隣の label は flex:1 なので、
 width:100% の入力欄を横に並べると **見出しが1文字ぶん（14.2px）まで潰れて縦に割れる**
 （メモ行の高さ 260px ／ 同じカードの経費行は 57px）。メモ行だけ縦積みにする。 */
/* 「気になる点を代表に伝える」の箱: スマホでも開く手がかりを出す（歩合率カードと同じ作法）。 */
.notebox>summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.notebox>summary b{white-space:nowrap}
.notebox>summary::after{content:'開く';font-size:12px;color:var(--accent);font-weight:600;margin-left:auto}
.notebox[open]>summary::after{content:'閉じる'}
/* ★代表の担当詳細でメモが td.num の nowrap を継承すると、500字で表が5,555px＝
 「歩合」の列が箱の4,260px外へ出る。折り返して幅を持たせる。 */
.memocell{display:block;font-size:10.5px;white-space:normal;text-align:left;
 margin-left:auto;max-width:22em;overflow-wrap:anywhere}
.dcard .costrow.memorow{display:block}
.dcard .costrow.memorow label{display:block;margin-bottom:6px}
.dmemo{width:100%;min-width:0;font:inherit;font-size:13px;padding:6px 8px;
 border:1px solid var(--line);border-radius:8px;background:var(--card,#fff);color:inherit}
.dmemo:disabled{opacity:.6}
/* ★知人チェックのラベル側も、このコードベースの44px基準に揃える（素のままだと37.9px）。 */
.dfrow label{min-height:44px;display:flex;flex-direction:column;justify-content:center}
@media(max-width:760px){ .dmemo{font-size:16px} } /* iOSの自動ズーム防止 */

/* @media(min-width:761px)（メディアタイプ無し＝all）は印刷にもそのまま効く。
 実際に配る書類は invoice.html（別ファイル・自前の @media print）だが、
 担当画面や管理画面を Cmd+P したときに、貼り付いた見出しや中央寄せの箱がそのまま出ないようにする。 */
@media print{
 .wrap.narrow .card.dealcard .scroll.dt{width:auto;max-width:none;margin-left:0;transform:none}
 .scroll{max-height:none;overflow:visible}
 .scroll tfoot td,.scroll tfoot th,
 .stick1 td:first-child,.stick1 th:first-child,
 thead th{position:static}
 .stick{display:none}
}

/* 工程バーの畳み・まとめて確定・これまでのお支払い */
.flowfold{margin:10px 0 0}
.flowfold>summary{cursor:pointer;font-size:12.5px;color:var(--muted);padding:6px 0;list-style:revert}
.flowfold>summary:hover{color:var(--ink)}
.finb{border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;margin:8px 0}
.finb>summary{cursor:pointer;padding:4px 0}
.finb .frow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:7px 0;border-top:1px solid var(--line);font-weight:400;margin:0;cursor:pointer}
.finb .frow:first-of-type{border-top:0}
#tHist tr.cur td{background:var(--pend-bg)}

/* ★受け入れチェック */
.onb{margin:6px 0 10px;padding-left:20px}
.onb li{margin:4px 0;font-size:13.5px}

/* ★済んだ段を1行に／困ったとき */
.foldbar{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;padding:2px 0;min-height:32px}
.foldbar>.note:last-child{white-space:nowrap;flex:0 0 auto}
.foldbar:hover .note{color:var(--ink)}
.card.folded > *:not(.foldbar){display:none !important}
.card.folded{padding-top:12px;padding-bottom:12px}
.faq dt{font-weight:600;font-size:13.5px;margin-top:10px}
.faq dd{margin:3px 0 0;font-size:13.5px;color:var(--muted)}

/* ★スマホ幅: きょうやることの行が右にはみ出す（ボタンが折り返せない）→ 狭いときは折り返す */
@media(max-width:600px){ .trow{flex-wrap:wrap} .trow>button{margin-left:auto} .trow .tl{min-width:0;flex:1 1 60%} }