/* ============================================================================
   style.css のトークンを使う追加コンポーネント。
   画面設計 docs\画面設計.md で決まった、希望入力のチップUIと日ごと備考。
   トークンは style.css 側に定義がある前提で、ここでは色を直に書かない
   （色は1つも直書きしていない。border-radius も var(--radius) 経由で
   style.css の SmartHR実測値トークンに連動する）。

   2026-09-19 改訂（1回目）: 「選択済み／未回答の差が弱い」という自己申告点を受けて、
   Airシフト（airregi.jp/shift/）の実際のチャット風UIで見た「選ばれた側は塗りつぶし、
   未処理側は縁取りのみ」という強いコントラストの付け方を踏襲した（HTML/CSSは見ていない、
   考え方だけ）。チップは選択時にチェック記号＋浮き上がる影を足し、未回答行は左に太い帯を立てた。

   2026-09-19 改訂（2回目）: 参考元を SmartHR Design System (https://smarthr.design/) 1本に
   絞り直した。本ファイル自体に色の直書きは無いため変更は最小限（等幅フォントの指定を
   "IBM Plex Mono",monospace の直書きから var(--font-mono) 参照に統一しただけ）。
   トークンの数値根拠・曜日3色との衝突回避の詳細は style.css 冒頭のコメントを参照。
   ============================================================================ */

/* 1日分のブロック */
.dayrow{
  display:flex;flex-direction:column;gap:7px;
  padding:11px 14px 11px 12px;border-bottom:1px solid var(--line);
  border-left:3px solid transparent;
}
.dayrow:last-child{border-bottom:none}
.dayrow.unanswered{background:var(--warn-soft);border-left-color:var(--warn)}
.dayhead{display:flex;align-items:center;gap:10px}
.dayhead .date{font-family:var(--font-mono);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}

/* 時間帯チップ — 長い選択肢を1行に圧縮せず2段書きにする */
.daylist{align-items:stretch}
.dayrow{align-items:stretch}
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:6px;width:100%}
.chips.more{margin-top:-1px}
/* display:grid が [hidden] を打ち消すので明示的に止める */
.chips[hidden]{display:none}
.chip{
  font:inherit;cursor:pointer;text-align:left;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:7px 10px 7px 26px;position:relative;
  display:flex;flex-direction:column;gap:1px;min-height:46px;
  transition:border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
/* 未選択チップにも空のチェック枠を出し、選択時との差を形でも示す */
.chip::before{
  content:"";position:absolute;left:9px;top:9px;width:13px;height:13px;
  border-radius:4px;border:1.5px solid var(--line-strong);background:var(--surface);
}
.chip:hover:not(:disabled){border-color:var(--action)}
.chip:disabled{opacity:.5;cursor:not-allowed}
.chip .chip-main{font-size:13.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip .chip-sub{font-size:10.5px;color:var(--muted);white-space:nowrap}
.chip.on{
  background:var(--action);border-color:var(--action);color:var(--btn-ink);
  box-shadow:var(--shadow);
}
.chip.on::before{
  border-color:var(--btn-ink);background:var(--btn-ink);
  display:flex;align-items:center;justify-content:center;
  color:var(--action);font-size:10px;font-weight:900;line-height:1;
  content:"\2713";text-align:center;
}
.chip.on .chip-sub{color:inherit;opacity:.85}
.chip.rest .chip-main{font-weight:500}

/* 押せるものは24px以上（WCAG 2.2 / 2.5.8）。22pxで落ちていた */
.morebtn{
  font:inherit;font-size:var(--fs-xs);cursor:pointer;align-self:flex-start;
  background:none;border:none;color:var(--action);padding:4px 6px;text-decoration:underline;
  min-height:28px;display:inline-flex;align-items:center;
}

/* その日の備考 — 折りたたまない。実データで最も使われている欄 */
.daynote{
  width:100%;font-size:var(--fs-m);padding:5px 8px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);
}
.daynote::placeholder{color:var(--muted);opacity:.75}
.daynote:disabled{background:var(--sunk)}

/* 調整画面 — その日の備考パネル。セルを1つずつ開かせない */
.notepanel{margin-top:12px}
.notepanel .card-head{gap:10px}
.notepanel ul{list-style:none;margin:0;padding:0}
.notepanel li{
  display:flex;gap:14px;padding:7px 16px;border-bottom:1px solid var(--line);font-size:13px;
}
.notepanel li:hover{background:var(--sunk)}
.notepanel li:last-child{border-bottom:none}
.notepanel .who{flex:0 0 190px;font-weight:700}
.notepanel .what{flex:1;white-space:normal}
td.cell.hasnote{box-shadow:inset 0 -3px 0 var(--action)}

/* 勤務量の目安メモ（集計・マスタ）。自由記述なので折り返す。数値ではないので等幅にしない */
td.memo{
  white-space:normal;color:var(--muted);font-size:12px;
  max-width:200px;line-height:1.5;
}

/* 保存失敗の通知。黙って飲み込まないための最小限の表示 */
.toasts{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;z-index:50;width:min(520px,calc(100% - 32px));
}
.toast{
  background:var(--danger-soft);color:var(--danger);
  border:1px solid var(--danger);border-radius:var(--radius);
  padding:10px 14px;font-size:13px;font-weight:700;box-shadow:var(--shadow);
}
.toast.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}

/* 実データを表示しているときの帯。ダミー用の帯と見間違えないよう色を変える */
.devbar.real{
  background:var(--danger-soft);color:var(--danger);border-bottom-color:var(--danger);
}

/* ===========================================================================
   スマホでの実測にもとづく修正（2026-09-19）
   375px 幅で計測した結果、タップ領域195個のうち66個が44px未満だった。
   Apple・Google とも最小44pxを推奨しており、現場が片手で毎月31日分を
   触る画面なので、ここは妥協しない。最小フォントも10.5pxは小さすぎた。
   =========================================================================== */
@media (max-width: 768px) {
  /* 時間帯チップ。31日ぶんタップするので最優先 */
  .chip{min-height:52px;padding:9px 10px 9px 28px}
  .chip .chip-main{font-size:14px}
  .chip .chip-sub{font-size:11.5px}

  /* 「他の時間帯」。24pxしかなく、指では押しにくかった */
  .morebtn{
    min-height:44px;display:flex;align-items:center;
    padding:0 4px;font-size:13px;align-self:stretch;
  }

  /* その日の備考。36px → 44px */
  .daynote{min-height:44px;font-size:var(--fs-m);padding:8px 10px} /* 16px未満にしない（§1-13） */

  /* 上部ナビと月選択 */
  .topbar{height:56px}
  .topbar nav button{min-height:44px;display:flex;align-items:center}
  .topbar .who button{min-height:36px;padding:0 12px}
  .pagehead select,
  .kibou select{min-height:44px;font-size:var(--fs-m)} /* 16px未満にしない（§1-13） */

  /* 提出ボタン */
  button.btn{min-height:48px;font-size:15px;width:100%}

  /* 帯とヒントの最小文字。12px を下回らせない */
  .devbar,.hint{font-size:12.5px}
}

/* ===========================================================================
   ナビはヘッダーに戻した（2026-09-21・「サイドメニューは見づらい、ヘッダーでいい」）。
   ヘッダーは常に画面上に残す（スクロールロック）。狭い画面では2段に組み替える。
   =========================================================================== */
@media (max-width: 860px){
  /* スマホは2段。1段目にロゴと名前、2段目にタブ。
     横に詰め込むと必ずどれかが押せなくなる（2026-09-19 の実機で発生済み） */
  .topbar{
    height:auto;padding:0;align-items:center;
    display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
    position:sticky;top:0;z-index:20;
  }
  .topbar .brand{padding:10px 0 10px 14px}
  .topbar .spacer{display:none}
  .topbar .who{
    grid-column:2;justify-self:end;padding:8px 14px 8px 0;
  }
  .topbar nav{
    grid-column:1 / -1;grid-row:2;margin:0;
    display:flex;width:100%;border-top:1px solid var(--line);
    /* min-width:0 が無いと flex アイテムが縮まず、ナビの箱が画面より 広く
       なって本体ごと横に動く（UX合格基準 §1-8）。はみ出しはこの中だけで閉じる */
    min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav button{flex:0 0 auto;padding:12px var(--sp-4)}
  .topbar .who{min-width:0;overflow:hidden}
  main{padding:var(--sp-4);width:min(1360px, 100% - var(--sp-5));margin:var(--sp-3) auto var(--sp-8)}
  /* ヘッダーが2段になるぶん、固定の基準とグリッドの高さを引き直す */
  :root{--topbar-h:112px}
  .gridwrap{max-height:calc(100dvh - 210px)}
}

/* ===========================================================================
   マスタの編集（2026-09-21 の指摘 #25）
   読むだけの画面だったので、追加・編集のダイアログと副タブを足した。
   =========================================================================== */
.subtabs{display:flex;gap:2px;margin-bottom:var(--sp-5);border-bottom:1px solid var(--line)}
.subtab{
  background:none;border:none;cursor:pointer;font:inherit;font-size:var(--fs-s);
  color:var(--muted);padding:9px var(--sp-4);border-bottom:3px solid transparent;
  margin-bottom:-1px;letter-spacing:.04em;
}
.subtab:hover{color:var(--ink);background:var(--sunk)}
.subtab[aria-current="page"]{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)}

.card-head .spacer{flex:1}
.rowbtns{display:inline-flex;gap:6px}
.btn.ghost.danger{border-color:var(--danger);color:var(--danger)}
.btn.ghost.danger:hover{background:var(--danger-soft)}

/* 入力ダイアログ。1画面に収まらない項目数になるので2列に組む */
.formdlg{
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  padding:0;max-width:min(680px,92vw);width:100%;
}
.formdlg::backdrop{background:rgba(51,51,51,.45)}
.formdlg-head{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line)}
.formdlg-head h2{font-size:var(--fs-l);letter-spacing:.06em}
.formgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--sp-4);padding:var(--sp-5);
}
.formgrid .field{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-xs);color:var(--muted);font-weight:700}
.formgrid .field.wide{grid-column:1 / -1}
.formgrid .field small{font-weight:400;color:var(--muted);line-height:1.5}
.formgrid input[type=checkbox]{width:20px;height:20px;min-height:0;align-self:flex-start}

/* 目安の入力欄（2026-09-22）。
   「値1」「値2」では何を入れる欄か分からなかったので、決め方に合わせて
   見出しを変え、いまの設定を最後に言葉で出す。 */
.targetbox{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:flex-end}
.targetbox .tmode{min-width:190px}
.targetbox .tfield{display:flex;flex-direction:column;gap:4px;min-width:150px;font-weight:700}
.targetbox .tfield > span{font-size:var(--fs-xs);color:var(--muted)}
.targetbox .tprev{
  flex:1 1 100%;margin:0;padding:7px 10px;border-radius:var(--radius-s);
  background:var(--sunk);border:1px solid var(--line-soft);
  font-size:var(--fs-s);font-weight:400;color:var(--ink);
}
.targetbox .tprev b{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.formdlg .msg{padding:0 var(--sp-5);color:var(--danger);font-size:var(--fs-xs)}
.formdlg-foot{
  display:flex;justify-content:flex-end;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line);background:var(--sunk);
}

/* 対象者の複数選択。人数が多いので枠内スクロール */
.multibox{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 10px;
  border:1px solid var(--line);padding:var(--sp-3);max-height:190px;overflow:auto;background:var(--surface);
}
.multibox label{display:flex;align-items:center;gap:6px;font-weight:400;color:var(--ink);font-size:var(--fs-xs)}
.multibox input[type=checkbox]{width:18px;height:18px;min-height:0}

/* ===========================================================================
   提出状況（2026-09-21 の指摘 #11 #12 #13）
   =========================================================================== */
.statusbar{
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  background:var(--sand);border:1px solid var(--line);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4);font-size:var(--fs-s);
}
.statusbar .sb-deadline{font-weight:700;font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* 表の見出しを枠の中で固定する。枠に高さが無いと sticky は効かない */
/* 表を高くする（2026-09-21 の指摘）。
   一度 overflow-y:visible にしてページ側でスクロールさせようとしたが、
   overflow-x:auto を付けた枠は縦も自動になり、見出しが枠の中に貼り付いて
   行の上に宙に浮いた（実機で発生）。枠の中でスクロールさせる形に戻し、
   高さだけ画面いっぱいまで広げる。 */
/* 短い表では枠に収まってスクロールが起きず、固定が効いていないように見える。
   min-height の空白も出ていた（2026-09-22 の指摘 I）。上限だけ決めて、
   表の長さに合わせて縮むようにする。 */
.tallwrap{overflow:auto;max-height:calc(100dvh - 210px)}
table.stickyhead thead th{position:sticky;top:0;z-index:3}

/* ===========================================================================
   シフト調整の追加分（2026-09-21 の指摘 #15 #16 #17 #18 #19 #20）
   =========================================================================== */
/* 日付見出し。申告は「緑の点」ではなく件数の文字で出す（指摘 #17） */
table.grid th.day .wd{display:block;font-size:10px;opacity:.85}
table.grid th.day .th-note{
  display:block;font-size:9px;font-weight:700;color:var(--accent);
  background:var(--accent-soft);line-height:1.4;margin-top:1px;
}
table.grid th.day .th-closed{
  display:block;font-size:9px;font-weight:700;color:var(--danger);
  background:var(--danger-soft);line-height:1.4;
}
table.grid th.day.closed{background:var(--danger-soft)}
table.grid th.day{cursor:pointer}

/* 休診日の列は斜線で沈める（指摘 #20） */
td.cell.closedday{background:repeating-linear-gradient(-45deg,var(--sunk) 0 5px,transparent 5px 10px)}

/* 部門の小計。部門の行の下に置く（指摘 #15） */
table.grid tr.subrow th.corner{background:var(--sand)}
table.grid tr.subrow th.corner b{font-size:var(--fs-xs)}
table.grid td.gsub{
  background:var(--sand);text-align:center;font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;font-size:11px;font-weight:700;color:var(--muted);padding:3px 2px;
}
/* 常駐人数を下回った日（指摘 #16） */
table.grid td.gsub.short,table.grid tfoot td.short{
  background:var(--danger-soft);color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger);
}
table.grid td.gsub.short::before,table.grid tfoot td.short::before{
  content:"\25BC";font-size:8px;margin-right:2px;vertical-align:1px;
}

.gridhint{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-3)}

/* セルのメニューの先頭に、希望と申告を出す（指摘 #18） */
.cellmenu-head{
  padding:8px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;
  display:flex;flex-direction:column;gap:2px;font-size:var(--fs-xs);color:var(--muted);
}
.cellmenu-head b{font-size:var(--fs-s);color:var(--ink)}
.cellmenu-head .note{color:var(--accent);white-space:normal;line-height:1.5}

/* 日ビュー（指摘 #19） */
.dayview{
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  padding:0;max-width:min(860px,94vw);width:100%;max-height:86vh;
}
.dayview::backdrop{background:rgba(51,51,51,.45)}
.dayview-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line)}
.dayview-head h2{font-size:var(--fs-xl);letter-spacing:.06em}
.dayview-head .spacer{flex:1}
.dv-filter{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-5);background:var(--sunk);border-bottom:1px solid var(--line);font-size:var(--fs-xs);color:var(--muted)}
.dv-toggles{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.dv-toggles label{display:flex;align-items:center;gap:5px;color:var(--ink)}
.dv-toggles input{width:18px;height:18px;min-height:0}
.dayview-body{padding:var(--sp-5);overflow:auto;display:flex;flex-direction:column;gap:var(--sp-5)}
.dv-dept-head{display:flex;align-items:center;gap:var(--sp-3);padding-bottom:6px;border-bottom:1px solid var(--line)}
.dv-dept-head b{font-size:var(--fs-m)}
.dv-alert{font-size:var(--fs-xs);color:var(--danger);font-weight:700}
.dv-list{list-style:none;margin:8px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 16px}
.dv-list li{display:flex;align-items:baseline;gap:10px;font-size:var(--fs-s);padding:3px 0;border-bottom:1px solid var(--line-soft)}
.dv-time{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--accent);flex:0 0 6.5em}
.dv-name{flex:1}
.dv-hours{color:var(--muted);font-size:var(--fs-xs)}
.dv-notes{border-top:1px solid var(--line);padding-top:var(--sp-4)}
.dv-notes h3{font-size:var(--fs-s);margin-bottom:6px}
.dv-notes ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.dv-notes li{display:flex;gap:12px;font-size:var(--fs-xs);line-height:1.6}
.dv-notes .who{flex:0 0 7em;font-weight:700}
.dv-notes .what{flex:1;color:var(--muted)}

/* 集計の警告行（2026-09-21 の指摘 #24） */
tr.alertrow td{background:var(--warn-soft)}
tr.alertrow:hover td{background:var(--warn-soft)}
.nomark{color:var(--muted);font-size:var(--fs-xs)}

/* ===========================================================================
   PDF帳票（2026-09-21 の指摘）
   画面をそのまま印刷するのではなく、配るための紙面を別に組む。
   普段は隠しておき、印刷のときだけ画面と入れ替える。
   =========================================================================== */
.printroot{display:none}

@media print{
  .app{display:none !important}
  .printroot{display:block}
  body{background:#fff}
}

/* 帳票は所属ごとに1枚ずつ。30名×31日を1枚に詰めると 6.5pt まで落ちて読めない（指摘 #47） */
.report{font-family:var(--font-jp);color:#000;background:#fff;break-after:page}
.report:last-child{break-after:auto}
.r-head{display:flex;align-items:flex-end;gap:16px;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:10px}
.r-head h1{font-family:var(--font-serif);font-size:20pt;font-weight:700;letter-spacing:.1em;margin:0}
.r-sub-title{font-size:11pt;color:#333;margin:3px 0 0;letter-spacing:.08em}
.r-meta{margin-left:auto;display:flex;gap:20px;font-size:9pt}
.r-meta div{display:flex;flex-direction:column;gap:1px}
.r-meta span{color:#555;font-size:8pt}
.r-meta b{font-size:11pt}

.r-table{width:100%;border-collapse:collapse;table-layout:fixed}
.r-table th,.r-table td{border:.5pt solid #999;padding:2pt 1pt;font-size:9pt;line-height:1.2;text-align:center}
.r-table .r-name{width:86pt;text-align:left;padding-left:4pt;font-weight:500;white-space:nowrap;overflow:hidden}
.r-table .r-sum{width:26pt}
.r-table thead th{background:#eae8df;font-weight:700}
.r-table .r-day b{display:block;font-size:10pt}
.r-table .r-day span{display:block;font-size:7.5pt}
.r-table .r-cell span{display:block;font-size:8pt;font-variant-numeric:tabular-nums}
.r-table .r-sub th,.r-table .r-sub td{background:#eae8df;font-weight:700;border-top:1pt solid #000}
.r-table .r-short{outline:1.2pt solid #a4302a;outline-offset:-1.2pt;font-weight:700}
.r-table .d-sun{background:#fbe6e6}
.r-table .d-sat{background:#e4ebfa}
.r-table .d-hol{background:#e7f0e2}
.r-table .r-closed{background:repeating-linear-gradient(-45deg,#ddd 0 3pt,#fff 3pt 6pt)}
.r-foot{display:flex;gap:20px;flex-wrap:wrap;margin-top:8px;font-size:8pt;color:#333}

@page{size:A4 landscape;margin:8mm}

/* 未入力があると提出できない（2026-09-21 の指摘 #32） */
.deadline .dl-count.short{color:var(--danger);font-weight:700}
.deadline .dl-note{font-size:var(--fs-xs);color:var(--danger);width:100%}

/* 表は全部左揃え（2026-09-21 の指摘）。
   マスタ・提出状況・集計の数量列も左に寄せる。 */
.tablewrap table td.n,.tablewrap table th.n{text-align:left}

/* ===========================================================================
   日ビューの時間軸（Googleカレンダーの1日表示に合わせる）
   一覧で並べるだけでは「誰と誰が同じ時間に居るか」「どこが手薄か」が読めない。
   =========================================================================== */
.tl-head{display:flex;align-items:flex-end;gap:0;padding-bottom:4px;border-bottom:1px solid var(--line);margin-bottom:var(--sp-3)}
.tl-name{flex:0 0 7.5em;font-size:var(--fs-xs);padding-right:var(--sp-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-scale{position:relative;flex:1;height:18px}
.tl-tick{
  position:absolute;top:0;font-size:10px;color:var(--muted);transform:translateX(-50%);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tl-dept{margin-bottom:var(--sp-5)}
.tl-dept-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:6px}
.tl-dept-head b{font-size:var(--fs-m)}
.tl-rows{display:flex;flex-direction:column;gap:2px}
.tl-row{display:flex;align-items:center;min-height:26px}
.tl-row .tl-name{font-size:var(--fs-s);font-weight:500}
.tl-lane{position:relative;flex:1;height:26px;background:var(--sunk);border-left:1px solid var(--line)}
.tl-grid{position:absolute;top:0;bottom:0;width:1px;background:var(--line);opacity:.5}
.tl-bar{
  position:absolute;top:3px;bottom:3px;background:var(--accent);color:var(--btn-ink);
  border-radius:3px;font-size:10.5px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  display:flex;align-items:center;padding:0 6px;white-space:nowrap;overflow:hidden;
}
.tl-off{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:var(--fs-xs);color:var(--muted)}

/* 自分用メモ。管理者からも見えるが、調整では考慮しないものとして弱く出す */
.cellmenu-head .memo{color:var(--muted);white-space:normal;line-height:1.5;font-size:11px}
.cal-memo{font-size:11px;color:var(--muted);opacity:.85;line-height:1.4;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}

/* 受付の担当（2026-09-22 の要件 G）。会計・案内を表の中で見せる。
   自動で割り当てたあとも、セルを押せば人を変えられる。
   本人のセルにも同じ印を出す。担当の行まで目を動かさずに読めるようにするため。 */
table.grid tr.dutyrow th.corner{background:var(--accent-soft)}
table.grid tr.dutyrow th.corner b{font-size:var(--fs-xs);color:var(--accent)}
table.grid tr.dutyrow th.corner .dutymark{margin-left:5px;vertical-align:1px}
table.grid td.dutycell{
  background:var(--accent-soft);text-align:center;font-size:11px;font-weight:700;
  color:var(--accent);padding:0;white-space:nowrap;
}
table.grid td.dutycell .none{color:var(--muted);font-weight:400}
/* カードの中に直接置く説明文。表と左端をそろえる */
.card > p.hint{padding:0 var(--sp-5)}

.dutybtn{
  width:100%;min-height:26px;padding:3px 2px;cursor:pointer;
  border:1px solid transparent;border-radius:var(--radius-s);background:transparent;
  font-size:11px;font-weight:700;color:var(--accent);line-height:1.2;font-family:inherit;
}
.dutybtn:hover:not(:disabled){border-color:var(--accent);background:var(--surface)}
.dutybtn:disabled{cursor:default}

/* 役割の印。並び順で塗りと白抜きを交互にして、小さくても取り違えないようにする。
   色はマスタの並び順から決めるので、塗りつぶしの指定は JS 側の style で入る。
   枠線はどちらにも要るのでここに書く */
.dutymark{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:13px;height:13px;padding:0 2px;border-radius:3px;
  border:1px solid var(--accent);
  font-family:var(--font-jp);font-size:9px;font-weight:700;line-height:1;
}
.cellbtn .dutymark{position:absolute;top:1px;right:1px}

/* 常駐人数より多い日（要件 J）。不足＝赤▼、超過＝オレンジ▲（2026-09-22 指定）。
   青は土曜の色に使っているので、人数の話だと読めなかった */
table.grid td.gsub.over,table.grid tfoot td.over{
  background:var(--alert-soft);color:var(--alert);
}
table.grid td.gsub.over::before,table.grid tfoot td.over::before{
  content:"\25B2";font-size:8px;margin-right:2px;vertical-align:1px;
}