/* 管理者サイトの追加スタイル。app.css（共通トークン）のあとに読む。
   稼働者の画面（LINE内・480px）とは幅も情報量も違うので、ここで上書きする。
   **稼働者の画面にはこのファイルを送らない**（読み込むのは /a/ の画面だけ）。 */

/* 管理者はPCの広い画面で、表を横に並べて見る。480px の縛りをここで外す */
main{max-width:1180px;padding:var(--s3) var(--s3) var(--s5)}

/* 上部のナビ。どの画面からでも同じ位置にある */
.nav{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s1) var(--s3);background:var(--color-primary-soft);
  border-bottom:1px solid var(--color-border);
}
.nav .brand{font-size:16px;font-weight:700;color:var(--color-primary)}
.nav a{font-size:14px;color:var(--color-sub);text-decoration:none;padding:var(--s1) 0;white-space:nowrap}
.nav a[aria-current="page"]{color:var(--color-primary);font-weight:700;border-bottom:2px solid var(--color-primary)}
.nav .spacer{flex:1}
.nav .who{font-size:13px;color:var(--color-sub)}
/* 「会社」は、運営と**顧客の代表**に出す（誰に出すかの判定はサーバーの can_manage_own_company 1か所）。
   運営は全社を触れるが、代表は自分の会社だけ。
   黄色の「運営だけ」の印は**運営のときだけ**出す。代表に見せると、自分の画面なのに
   「自分は入れない場所だ」と読めてしまう（承認済みモックアップ CO-1 の形は運営のまま） */
.nav .nav-operator{display:flex;align-items:center;gap:var(--s1)}
.nav .only{
  font-size:11px;font-weight:700;color:var(--color-ink);background:var(--color-accent);
  border-radius:var(--s1);padding:0 var(--s1);
  display:none;
}
.nav .nav-operator.is-operator .only{display:inline}

/* 数字を横に並べる帯。今日の状況と、月の合計に使う */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s1);margin-bottom:var(--s3)}
.stat{border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--s1) var(--s2);background:var(--color-card)}
.stat .num{font-size:22px;font-weight:700;color:var(--color-ink);line-height:1.4}
.stat .cap{font-size:12px;color:var(--color-sub)}
/* 未入力は目立たせる。ここだけ見れば今日やることが分かる形にする */
.stat.alert{border-color:var(--color-warning);background:var(--color-warning-soft)}
.stat.alert .num,.stat.alert .cap{color:var(--color-warning)}
.stat.money{border-color:var(--color-primary);background:var(--color-primary-soft)}
.stat.money .num,.stat.money .cap{color:var(--color-primary)}

/* 表。行が多くなるので、罫線は薄く1本だけにする */
.table{width:100%;border-collapse:collapse;font-size:13px;background:var(--color-card)}
.table th{
  text-align:left;font-weight:400;font-size:12px;color:var(--color-sub);
  padding:var(--s1);border-bottom:1px solid var(--color-border);white-space:nowrap;
}
.table td{padding:var(--s1);border-bottom:1px solid var(--color-border);color:var(--color-text)}
.table th.num,.table td.num{text-align:right;font-variant-numeric:tabular-nums}
.table tbody tr:hover{background:var(--color-primary-soft)}

/* 粗利の段組み。クライアント → スタッフ の順に開く */
.table tr.level-1{background:var(--color-bg)}
.table tr.level-1 td{font-weight:700}
.table tr.level-2 td{font-size:12px;color:var(--color-sub)}
.table tr.level-2 td:first-child{padding-left:var(--s4)}
.mark{color:var(--color-primary);font-size:11px;margin-right:4px}
/* 押せる数字。押すと開くことが分かるよう、点線を引く */
.drill{
  color:var(--color-primary);border:none;background:none;padding:0;font:inherit;
  border-bottom:1px dotted var(--color-primary);cursor:pointer;font-variant-numeric:tabular-nums;
}
.rate{font-size:11px;color:var(--color-sub);display:block}

/* 表の中の小さなボタン（代理入力・再送・ダウンロード） */
.mini{
  font-size:12px;color:var(--color-primary);background:var(--color-card);
  border:1px solid var(--color-primary);border-radius:8px;padding:2px 10px;
  cursor:pointer;margin-right:4px;font-family:inherit;white-space:nowrap;
}
.tag{font-size:11px;border-radius:4px;padding:1px 6px;border:1px solid;white-space:nowrap}
.tag-blocked{color:var(--color-error);background:#FEF2F2;border-color:#FECACA}

/* 締めの画面。止める条件と、ただの注意を見た目で分ける */
.blocker{border:1px solid var(--color-error);background:#FEF2F2;border-radius:var(--radius);padding:var(--s2);margin-bottom:var(--s2)}
.blocker h3{font-size:14px;font-weight:700;color:var(--color-error);margin-bottom:var(--s1)}
.blocker ul{margin:0;padding-left:20px;font-size:13px;color:var(--color-error)}
.caution{border:1px solid var(--color-warning);background:var(--color-warning-soft);border-radius:var(--radius);padding:var(--s1) var(--s2);margin-bottom:var(--s2);font-size:12px;color:var(--color-warning)}
.settled{border:1px solid var(--color-success);background:var(--color-success-soft);border-radius:var(--radius);padding:var(--s1) var(--s2);margin-bottom:var(--s2);font-size:13px;color:var(--color-success)}
/* 止める条件の中の未入力の表。赤い枠の中に置くので、行の背景は白に戻して読みやすくする */
.blocker .table{margin-bottom:var(--s1)}
.blocker .table td{color:var(--color-text)}

/* 代理入力の欄（今日の画面と締めの画面で同じ形・VISION 33/34）。
   表の一部だが、入力欄が並ぶので背景を変えて「いま書いている場所」を示す。
   誰に見える欄なのかは、欄の上の札と欄の下の一文の2か所で伝える */
.edit-row td{background:var(--color-primary-soft)}
.edit-row input{
  padding:4px var(--s1);font-size:13px;font-family:inherit;
  border:1px solid var(--color-border);border-radius:8px;
}
.edit-row input[type="time"]{width:110px}
.edit-row input[type="text"]{width:100%;max-width:480px}
.edit-row .sep{color:var(--color-sub);margin:0 4px}
.edit-row label{font-size:12px;color:var(--color-sub);margin-right:var(--s1)}
.note-field{margin-top:var(--s1)}
.field-head{display:flex;align-items:center;gap:var(--s1);margin-bottom:4px}
.field-head label{margin:0}
.field-note{font-size:12px;color:var(--color-sub);margin:4px 0 0}
.edit-actions{margin-top:var(--s1)}
.tag-worker{color:var(--color-warning);background:var(--color-warning-soft);border-color:var(--color-warning)}
/* 出勤の打刻の列（2026-10-10）。離れている・場所の確認なしは目立たせる（見つけるための列なので） */
.warn{color:var(--color-warning);font-weight:700}
.muted{color:var(--color-sub)}
.tag-admin{color:var(--color-primary);background:var(--color-primary-soft);border-color:var(--color-primary)}

/* 押す前の確認（欠勤にする・確認待ちに戻す）。画面の上に重ねて出し、答えるまで下を触らせない。
   お金が0円になる操作（欠勤）だけ、上の線と押すボタンを赤にする */
.confirm-backdrop{
  position:fixed;inset:0;z-index:10;background:rgba(0,32,80,.32);
  display:flex;align-items:center;justify-content:center;padding:var(--s2);
}
.confirm{
  width:100%;max-width:480px;background:var(--color-card);
  border:1px solid var(--color-border);border-top:4px solid var(--color-primary);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:var(--s3);
}
.confirm.danger{border-top-color:var(--color-error)}
.confirm h3{font-size:16px;font-weight:700;color:var(--color-ink);margin-bottom:var(--s1)}
.confirm-meta{font-size:14px;color:var(--color-text);margin-bottom:var(--s1)}
.confirm-points{margin:0 0 var(--s2);padding-left:20px;font-size:14px;color:var(--color-text)}
.confirm-points .money{color:var(--color-error);font-weight:700}
.confirm .field{margin-bottom:var(--s1)}
.confirm .field input{padding:var(--s1);font-size:14px}
.confirm-actions{display:flex;gap:var(--s1);margin-top:var(--s2)}
.confirm-actions .btn{width:auto;display:inline-block;padding:var(--s1) var(--s3)}
.btn-danger{background:var(--color-error)}

/* 支払と請求を左右に並べる（割り当てと単価の画面） */
.two-col{display:flex;gap:var(--s2);margin-bottom:var(--s2);flex-wrap:wrap}
.two-col>.card{flex:1;min-width:280px;margin-bottom:0}
.card.pay{border-color:var(--color-primary)}
.card h3.pay-title{color:var(--color-primary)}
.hint{font-size:11px;color:var(--color-sub);margin-bottom:var(--s2)}

/* シフト表。日数ぶん横に伸びるので、この表だけ横スクロールさせる */
.matrix-wrap{overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-card)}
.matrix{border-collapse:collapse;font-size:12px}
.matrix th,.matrix td{border-bottom:1px solid var(--color-border);padding:3px 2px;text-align:center;white-space:nowrap}
.matrix th.name,.matrix td.name{text-align:left;padding-left:var(--s1);position:sticky;left:0;background:var(--color-card);min-width:110px}

/* その日のボード（2026-10-19・S25）。節の区切りと、日付の見出しのボタン */
.cand-sep td{background:#F1F5F9;color:var(--color-sub);font-size:13px;font-weight:700;padding:4px var(--s1)}
.matrix th .day-head{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.matrix th .day-head:hover{color:var(--color-primary)}

/* 当て込みのための並べ替え（2026-10-18）。イベントで絞ったときだけ効く。
   色を付けるのは**名前の列だけ**にする。マスに色を敷くと、予定の印の色（報告ずみ・未入力・欠勤）と
   混ざって、どちらの意味の色か分からなくなる */
.matrix tr.to-assign th.name{border-left:4px solid var(--color-warning);background:var(--color-warning-soft);padding-left:calc(var(--s1) - 4px)}
.matrix tr.idle th.name{color:#94A3B8}
.matrix .tag-wish{color:var(--color-warning);background:#fff;border-color:var(--color-warning);margin-left:4px;white-space:nowrap}
/* 区切りの行。表の幅いっぱいに1本だけ */
.matrix tr.row-sep td{background:#F1F5F9;color:var(--color-sub);font-size:13px;text-align:left;padding:2px var(--s1);position:sticky;left:0}
.cell{display:inline-block;min-width:28px;border-radius:4px;font-size:11px;border:1px solid transparent;padding:1px 0}
.cell.done{background:var(--color-success-soft);color:var(--color-success);border-color:var(--color-success)}
.cell.wait{background:var(--color-warning-soft);color:var(--color-warning);border-color:var(--color-warning)}
.cell.plan{background:var(--color-card);color:var(--color-sub);border-color:var(--color-border)}
.cell.absent{color:var(--color-error)}

.filters{display:flex;gap:var(--s1);align-items:flex-end;margin-bottom:var(--s2);flex-wrap:wrap}
.filters .field{margin-bottom:0}
.legend-row{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2);font-size:11px;color:var(--color-sub)}

/* 表だけを横に動かす入れ物（列の多い表を狭い幅で開いたとき、ページ全体は動かさない） */
.table-scroll{overflow-x:auto}

/* シフトの入力期日の帯（P-1・P-2・VISION 50）。シフト表のいちばん上に出す。
   期日の前は青、受付を終えたら灰色にして「もう本人は入れられない」を色でも分ける */
.due{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(200px,1fr) auto;gap:var(--s2);align-items:center;
  background:var(--color-primary-soft);border:1px solid var(--color-primary);border-radius:var(--radius);
  padding:var(--s2);margin-bottom:var(--s2);
}
.due.is-closed{background:var(--color-card);border-color:var(--color-sub)}
/* 翌月分に期日が無い（本人が自由に入れる）ときは、人数の欄が無いので2列にし、色も落とす */
.due.is-none{grid-template-columns:minmax(0,1fr) auto;background:var(--color-card);border-color:var(--color-border)}
.due-title{font-size:16px;font-weight:700;color:var(--color-ink);margin:0 0 var(--s1)}
.due.is-none .due-title:last-child{margin-bottom:0}
.due-sub{font-size:14px;color:var(--color-sub);margin:0}
.due-left{
  font-size:14px;font-weight:700;color:var(--color-primary);background:var(--color-card);
  border:1px solid var(--color-primary);border-radius:var(--s1);padding:0 var(--s1);margin-left:var(--s1);white-space:nowrap;
}
.due-num{font-size:21px;font-weight:700;color:var(--color-ink);margin:0;line-height:1.4}
.due-num small{font-size:14px;font-weight:400;color:var(--color-sub)}
.due-meter{height:var(--s1);border-radius:var(--s1);background:var(--color-border);overflow:hidden;margin:var(--s1) 0}
.due-meter span{display:block;height:100%;background:var(--color-primary)}
.due.is-closed .due-meter span{background:var(--color-sub)}
.due-act{display:flex;flex-direction:column;gap:var(--s1)}
.due-change{font-size:14px;color:var(--color-sub);margin:0 0 var(--s2)}
.due-late{margin-bottom:var(--s2)}
/* 期日の日を変える小窓の「毎月[20]日の 23:59 に…」。欄を文の中に置く */
.due-inline-field{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);font-size:16px;color:var(--color-text);margin-bottom:var(--s2)}
.due-inline-field label{margin:0;font-size:16px;color:var(--color-text)}
.due-inline-field select{
  width:auto;padding:var(--s1);font-size:16px;font-family:inherit;
  border:1px solid var(--color-border);border-radius:var(--s1);background:var(--color-card);color:var(--color-text);
}
/* 延長中の札（P-2）。期日のあとに開けてある人だと、表の中で目に入るようにする */
.ext-tag{
  font-size:14px;font-weight:700;color:var(--color-warning);background:var(--color-warning-soft);
  border:1px solid var(--color-warning);border-radius:var(--s1);padding:0 var(--s1);white-space:nowrap;
}
/* 延長の小窓（P-3）。知らせるかのチェックと、本人に届く文の見本 */
.check-row{display:flex;gap:var(--s1);align-items:center;font-size:16px;color:var(--color-text);margin-top:var(--s2)}
.check-row input{margin:0}
.line-preview{border:1px dashed var(--color-sub);border-radius:var(--s1);padding:var(--s1) var(--s2);background:var(--color-bg);margin-top:var(--s2)}
.line-preview-head{font-size:14px;color:var(--color-sub);margin-bottom:var(--s1)}
.line-bubble{
  background:var(--color-card);color:var(--color-text);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--s1) var(--s2);font-size:14px;margin:0;
}
@media (max-width:720px){.due,.due.is-none{grid-template-columns:1fr}}

/* 締めの画面・期日のあとの変更（P-5）。何をしたかを文字と色の両方で分ける
   （追加は青・取り消しは赤・時刻の変更は橙。色だけにしない） */
.kind{font-size:14px;border-radius:var(--s1);padding:0 var(--s1);border:1px solid;white-space:nowrap}
.kind-add{color:var(--color-primary);border-color:var(--color-primary);background:var(--color-primary-soft)}
.kind-cancel{color:var(--color-error);border-color:var(--color-error);background:var(--color-card)}
.kind-time{color:var(--color-warning);border-color:var(--color-warning);background:var(--color-warning-soft)}
.sub-line{display:block;font-size:14px;color:var(--color-sub)}
.by-self{color:var(--color-sub)}

/* 押せないボタンは、押せないと**見て**分かる形にする。
   app.css の opacity:.5 だけでは、塗りの濃い主ボタンは「薄い青」にしか見えず、
   実際にスクショで確かめたところ押せるように見えた（2026-09-10）。
   締めのボタンは「止める条件が残っているうちは押せない」ことが設計の要なので、
   機能（disabled）と見た目を一致させる。 */
.btn:disabled,
.btn:disabled:hover{
  background:var(--color-border);
  color:var(--color-sub);
  opacity:1;
  cursor:not-allowed;
}

/* シフトの型の編集（VISION 74・A-1）。現場のカードは横幅が狭いので、
   6つの欄を横一列に置くとはみ出す。折り返す並びにして、狭いままでも全部見えるようにする */
.type-editor{padding:var(--s1) 0}
.type-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);margin-bottom:var(--s1)}
.type-row input[type="text"]{flex:1 1 84px;min-width:72px}
.type-row input[type="time"]{width:104px}
.type-row input[type="number"]{width:60px}
.type-unit,.type-next{font-size:12px;color:var(--color-sub)}
.type-next{min-width:0}
/* 時刻の組・休憩の組は、途中で折り返さずひとかたまりで動く */
.type-group{display:inline-flex;align-items:center;gap:4px}
.type-row{padding-bottom:var(--s1);border-bottom:1px solid var(--color-border)}
/* 編集欄のボタンは行の中に収める（.btn は既定で width:100% の block なので、そのままだと1つで1行を占める） */
.type-row .btn,.type-editor .form-actions .btn{display:inline-block;width:auto;padding:var(--s1) var(--s2);font-size:13px}
.type-row .btn{white-space:nowrap;padding:var(--s1)}
.type-editor .form-actions{display:flex;flex-wrap:wrap;gap:var(--s1)}
/* 型の並び替え（2026-10-09）。つまみ（ドラッグ）と ↑↓ を1かたまりにして、行の先頭に置く。
   ドラッグだけだと、画面が狭いとき・キーボードだけのときに動かせないので両方出す */
.type-move{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto}
.type-grip{cursor:grab;color:var(--color-sub);font-size:16px;line-height:1;padding:0 2px;user-select:none}
.type-row[draggable="true"]{cursor:default}
.type-move .mini{min-width:28px;padding:2px 6px;line-height:1.2}
/* 閉じた型は行ごとグレーにする（稼働者のボタンにはもう出ない・2026-10-07） */
.type-row.is-closed{opacity:.6}

/* 止めた・閉じた行の見せ方と、押す前の確認の小窓。
   稼働者の画面（止める・発行し直す）と現場の画面（閉じる・消す）の2枚で使う。
   片方の画面にだけ書くと、同じ操作が画面によって違う色で出る */
.mini-danger{color:var(--color-error);border-color:var(--color-error)}
.tag-stopped{color:var(--color-sub);background:var(--color-card);border-color:var(--color-sub)}
.table tr.is-stopped td{color:var(--color-sub);background:var(--color-bg)}
/* 消す＝赤の線、閉じる・片付ける＝黄の線 */
.scrim{
  position:fixed;inset:0;z-index:10;padding:var(--s2);
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--color-ink) 45%,transparent);
}
.scrim[hidden]{display:none}
.dialog{
  width:100%;max-width:560px;background:var(--color-card);
  border-radius:var(--radius-lg);border-top:4px solid var(--color-error);padding:var(--s3);
}
.dialog.is-warn{border-top-color:var(--color-warning)}
/* 共通の小窓は赤い線（消す・止めるの確認のため）。**直すだけの小窓は青**。
   2026-10-29 まで画面ごとに書いていて、書き忘れた画面だけ赤い線になっていた */
.dialog.is-plain{border-top-color:var(--color-primary)}
.dialog-title{font-size:21px;font-weight:700;color:var(--color-ink);margin-bottom:var(--s1)}
.dialog ul{font-size:14px;color:var(--color-text);padding-left:var(--s3);margin-bottom:var(--s2)}
.dialog li{margin-bottom:var(--s1)}
.dialog .caution{font-size:14px}
.dialog-actions{display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center}
.btn-inline{display:inline-block;width:auto;padding:var(--s1) var(--s3)}

/* 場所を探す欄と候補（2026-10-11）。候補は押せるボタンとして縦に並べる */
/* 現場の場所が入っているか（2026-10-11）。入っていない現場は出勤の距離が出ない */
.tag-ok{color:var(--color-primary);background:var(--color-primary-soft);border-color:var(--color-primary)}
.tag-todo{color:var(--color-warning);background:var(--color-warning-soft);border-color:var(--color-warning)}
/* イベントの現場（2026-10-16）。日を管理者が決める現場を一覧で見分ける。
   常勤にも札を出す（2026-10-18）。イベントだけに付けていたころは、常勤の現場と
   「イベントのはずなのに常勤で登録した現場」が同じ見た目で、取り違えに気づけなかった。
   ふだんの姿（常勤）は目立たせない */
.tag-event{color:var(--color-primary);background:var(--color-primary-soft);border-color:var(--color-primary)}
.tag-regular{color:var(--color-sub);background:#F8FAFC;border-color:var(--color-border)}

.find-field{grid-column:1 / -1}
.find-row{display:flex;gap:var(--s1);align-items:center}
/* **.btn は width:100% なので、そのまま並べると入力欄を押し潰す**（2026-10-06 と同じ癖） */
.find-row .btn{width:auto;flex:0 0 auto;padding-left:var(--s3);padding-right:var(--s3)}
.find-row input{flex:1;min-width:0}
.places{margin-top:var(--s1)}
.places .place{display:block;width:100%;text-align:left;margin-bottom:var(--s1);font-size:13px}
.places .place-src{display:block;font-size:11px;color:var(--color-sub);font-weight:400}
/* 候補の住所と、点の細かさ（2026-10-12）。建物ではない点は枠で見分けられるようにする。
   出勤の距離はこの点から測るので、町丁のまん中を選ぶと実際の建物から数百メートルずれる */
.places .place-addr{display:block;font-size:11px;color:var(--color-sub);font-weight:400}
.places .place-rough{border-color:var(--color-warning)}

/* ===== スマホで開いたとき（2026-10-11 岡沢さんの実機の報告） =====
   管理画面はPCで使う前提で作ってあるが、現場では**スマホで開く**ことがある。
   実機では ①ナビが縦に潰れて「シ/フ/ト/表」になり ②右端の「会社」が画面の外へ消え
   ③表のボタンが切れて押せなかった。
   項目を減らすのではなく、**折り返して全部見えるようにする**（隠すと、あることに気づけない）。 */
/* 表の入れ物。**横に動かせることが見た目で分かる**ようにする。
   切れているだけに見えると、右の「操作」のボタンに気づけない（スマホの実機で起きた） */
.table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right, var(--color-card) 30%, rgba(255,255,255,0)) left center / 32px 100% no-repeat,
    linear-gradient(to left, var(--color-card) 30%, rgba(255,255,255,0)) right center / 32px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,32,80,.14), rgba(0,32,80,0)) left center / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,32,80,.14), rgba(0,32,80,0)) right center / 12px 100% no-repeat;
  background-attachment:local, local, scroll, scroll;
}

@media (max-width:768px){
  main{padding:var(--s2) var(--s2) var(--s4)}

  /* ナビは折り返して全部出す。**1つ1つは折り返さない**（「シフト表」が縦に割れる原因） */
  .nav{flex-wrap:wrap;gap:var(--s1) var(--s2);padding:var(--s1) var(--s2)}
  .nav a{white-space:nowrap;padding:var(--s1) 0;min-height:32px;display:flex;align-items:center}
  .nav .brand{width:100%}
  /* 伸び縮みで右端を押し出す隙間は、折り返すときには要らない */
  .nav .spacer{display:none}
  /* 会社名は最後の行へ。ナビの項目と同じ行に混ぜると、押したい項目が押しにくくなる */
  .nav .who{width:100%;font-size:12px}
  .nav .nav-operator{white-space:nowrap}

  /* 表は横に動かして読む（列を削ると、PCと違うものを見ていることになる） */
  .table{font-size:12px}
  .table th,.table td{white-space:nowrap}
  /* 入力の欄は1列に。2列のままだと1つ1つが細くなって打てない */
  .form-grid{grid-template-columns:1fr}
  /* 行のボタンは、指で押せる高さに */
  .mini{min-height:32px}
}

/* ---------- 使い方を聞く（2026-10-14・public/a/help.js） ----------
   どの管理画面にも右下に出す。開いた小窓はスマホでは画面の下半分、PCでは右下の小さな窓 */
body{padding-bottom:var(--s5)}
.help-fab{
  position:fixed;right:var(--s2);bottom:var(--s2);z-index:40;
  padding:var(--s1) var(--s2);border:none;border-radius:var(--radius-lg);
  background:var(--color-primary);color:#fff;font:inherit;font-size:14px;font-weight:700;
  box-shadow:var(--shadow-lg);cursor:pointer;
}
.help-panel{
  position:fixed;right:var(--s2);bottom:var(--s2);z-index:41;
  width:min(420px,calc(100vw - var(--s4)));max-height:calc(100vh - var(--s5));overflow-y:auto;
  background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:var(--s2);
}
.help-panel h2{margin:0 0 var(--s1);font-size:16px}
.help-panel textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:var(--s1);
  border:1px solid var(--color-border);border-radius:var(--radius)}
.help-actions{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s1) 0}
.help-card{border:1px solid var(--color-border);border-top:4px solid var(--color-primary);
  border-radius:var(--radius);padding:var(--s1) var(--s2);margin-top:var(--s1)}
.help-card-title{font-weight:700;margin:0 0 var(--s1)}
.help-card ol,.help-guide ol{margin:0 0 var(--s1);padding-left:var(--s3);font-size:14px}
.help-feedback{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);margin-top:var(--s2)}
.help-feedback p{margin:0;width:100%}
/* 「いいえ」のあとに出す、状況を書く欄（2026-10-30） */
.help-unresolved{margin-top:var(--s2)}
.help-unresolved p{margin:0 0 var(--s1);font-size:14px;color:var(--color-sub)}
.help-unresolved textarea{width:100%;box-sizing:border-box}
/* 「その場所へ行く」で移った先の吹き出し（画面の上に固定）と、光らせる場所 */
.help-guide{
  position:fixed;left:var(--s2);right:var(--s2);top:var(--s2);z-index:42;
  max-width:560px;margin:0 auto;background:var(--color-card);
  border:2px solid var(--color-accent);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:var(--s2);
}
.help-guide-title{font-weight:700;margin:0 0 var(--s1)}
.help-spot{outline:4px solid var(--color-accent) !important;outline-offset:2px;border-radius:4px}
/* 運営が読む「使い方の質問」の表（お問い合わせの画面の下）。解決しなかった・見つからなかったを目立たせる */
.hq-title{margin-top:var(--s5)}
.warn-text{color:var(--color-warning)}

/* シフトの型（早番・中番・遅番）のボタン。**2つの画面で使う**ので共通に置く（2026-10-24）。
   「現場・単価」の単価の型と、シフト表の「日を足す」「予定を直す」。
   片方のHTMLに書くと、同じ操作が画面ごとに違う見た目になる（2026-10-06 の小窓と同じ） */
.type-chips{display:flex;flex-wrap:wrap;gap:var(--s1)}
.type-chip{font-size:14px;padding:var(--s1) var(--s2);border-radius:var(--radius);
  border:1px solid var(--color-border);background:var(--color-card);color:var(--color-sub);
  cursor:pointer;font-family:inherit;margin-right:var(--s1)}
.type-chip[aria-pressed="true"]{border-color:var(--color-primary);background:var(--color-primary-soft);
  color:var(--color-primary);font-weight:700}
.type-chip .sub{display:block;font-size:12px;font-weight:400;color:var(--color-sub)}

/* 報告フォーマットを選ぶ縦1列のリスト（2026-10-29・岡沢さんが見せてくれた「簡単コピペ」の形）。
   プルダウンにしないのは、**押した瞬間にその中身が下へ出て、合っているかをその場で確かめられる**ため */
.pick-list{border-top:1px solid var(--color-border);margin-bottom:var(--s2)}
.pick-row{display:block;width:100%;text-align:left;font-family:inherit;font-size:16px;
  padding:var(--s2);background:var(--color-card);color:var(--color-text);
  border:0;border-bottom:1px solid var(--color-border);cursor:pointer}
.pick-row[aria-pressed="true"]{background:var(--color-primary-soft);color:var(--color-primary);font-weight:700}
.pick-row .sub{display:block;font-size:14px;font-weight:400;color:var(--color-sub)}
/* フォーマットの中身（大分類 → 項目 → 内数）。内数は親の下に1段下げる */
.result-cat{margin-top:var(--s2)}
.result-cat h4{margin:0 0 var(--s1);font-size:16px}
.result-item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);padding:var(--s1) 0;
  border-bottom:1px solid var(--color-border)}
.result-item.is-sub{padding-left:var(--s3)}
.result-item .grow{flex:1 1 auto;min-width:120px}
.result-kind{font-size:12px;color:var(--color-sub);white-space:nowrap}
/* 欄（.field）の中のチェック行。app.css の `.field label{display:block}` と
   `.field input{width:100%}` のほうが強いので、ここで取り戻す。
   取り戻さないと、チェックが文字の上に乗って全体の幅まで伸びる（2026-10-29 に実ブラウザで発見。
   この現場に要るスキルのチェックも、同じ形で崩れていた） */
.field .check-row{display:flex}
.field .check-row input[type="checkbox"]{width:auto;flex:none}
.check-row.is-sub{padding-left:var(--s3)}