/* ── 便利ツールリモコン（2026-09-29 利用者「本番に設置しよう」） ─────────────────
   画面のどこへでも動かせる丸いリモコン・扇形のメニュー・動かせる窓。名前はすべて rc- で始める。
   層は #app の中に置く＝ログイン前（#app が消える）は一緒に消える。伝票などの別窓（html.slipwin）には出さない。
   重なり: 引き出し・確認の窓（60）と上の知らせ（70）より上、ログイン（80）とプルダウンの小窓（90・95）より下。
   層の中の順は 窓（10〜）＜ 扇形の下地 ＜ 項目 ＜ 引き出しの目印 ＜ リモコン */
.rc-layer {
  --rc-remote: var(--text);
  --rc-remote-ink: var(--panel);
  --rc-on-accent: var(--panel);
  --rc-ring: color-mix(in srgb, var(--text) 10%, transparent);
  --rc-fan: color-mix(in srgb, var(--text) 6%, transparent);
  --rc-fan-edge: color-mix(in srgb, var(--text) 16%, transparent);
  --rc-shadow: var(--shadow-sign, rgba(16, 24, 40, .16));
  position: fixed; inset: 0; z-index: 75; pointer-events: none;
  font-family: var(--sans); font-size: 12px; line-height: 1.5; color: var(--text);
}
html.slipwin .rc-layer { display: none; }
.rc-layer [hidden] { display: none !important; }
/* 字の色はここで決めない（:where で強さ 0）。前は .rc-layer button { color: inherit } が .rc-remote の色より強く効き、
   真ん中の白い点々が本体と同じ色になって消えていた（2026-09-29 利用者「真ん中の白・・は必要」） */
:where(.rc-layer) button { font: inherit; }
.rc-layer button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 動かしている間は画面の字を選ばせない（下の表の字が選ばれていた） */
html.rc-dragging, html.rc-dragging * { user-select: none !important; -webkit-user-select: none !important; }

/* リモコン */
.rc-remote {
  position: fixed; left: 0; top: 0; z-index: 2030; width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 0;
  border: 0; border-radius: 50%; background: var(--rc-remote); color: var(--rc-remote-ink); cursor: pointer;
  display: grid; place-items: center; pointer-events: auto;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  box-shadow: 0 0 0 5px var(--rc-ring), 0 8px 22px var(--rc-shadow);
  transition: box-shadow .2s, scale .15s;
}
.rc-remote.rc-moving { cursor: grabbing; scale: 1.06; box-shadow: 0 0 0 7px var(--rc-ring), 0 14px 30px var(--rc-shadow); }
.rc-remote.rc-held { scale: .94; }
.rc-remote svg { grid-area: 1 / 1; width: 24px; height: 24px; transition: opacity .18s, rotate .25s; }
.rc-remote .rc-g-x { opacity: 0; rotate: -90deg; }
.rc-remote.rc-open .rc-g-dots { opacity: 0; rotate: 90deg; }
.rc-remote.rc-open .rc-g-x { opacity: 1; rotate: 0deg; }

/* 扇形の下地となぞる線 */
.rc-overlay { position: absolute; inset: 0; z-index: 2000; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.rc-fan { fill: var(--rc-fan); stroke: var(--rc-fan-edge); stroke-width: 1; opacity: 0; transition: opacity .2s; }
.rc-fan.rc-on { opacity: 1; }
.rc-aim { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 6; fill: none; }

/* 項目 */
.rc-menu { position: absolute; inset: 0; z-index: 2010; pointer-events: none; }
.rc-item {
  position: fixed; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--text); cursor: pointer;
  display: grid; place-content: center; justify-items: center; gap: 2px;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  box-shadow: 0 4px 12px var(--rc-shadow);
  transform: translate(var(--x), var(--y)) scale(var(--s, .3)); opacity: 0;
  transition: transform .28s cubic-bezier(.2, .9, .3, 1.2), opacity .16s, background-color .12s, border-color .12s;
}
.rc-item.rc-shown { --s: 1; opacity: 1; pointer-events: auto; }
.rc-item svg { width: 19px; height: 19px; color: var(--tone); }
.rc-item span { font-size: 10px; line-height: 1.15; color: var(--dim); text-align: center; white-space: nowrap; }
.rc-item.rc-two span { font-size: 9.5px; }
.rc-item:hover { border-color: var(--accent-edge); }
.rc-item.rc-hot { --s: 1.12; background: var(--accent); border-color: var(--accent); transition-delay: 0s !important; }
.rc-item.rc-hot svg, .rc-item.rc-hot span { color: var(--rc-on-accent); }
.rc-item.rc-isopen::after { content: ""; position: absolute; top: 6px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.rc-item.rc-hot.rc-isopen::after { background: var(--rc-on-accent); }
.rc-ghost {
  position: fixed; left: 0; top: 0; z-index: 2020; box-sizing: border-box; border: 2px dashed var(--accent); border-radius: 10px;
  background: var(--accent-wash); pointer-events: none; display: grid; place-items: center; color: var(--accent); font-weight: 500;
}

/* 窓 */
.rc-wins { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.rc-win {
  position: fixed; box-sizing: border-box; min-width: 240px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 38px var(--rc-shadow);
  display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;
}
.rc-win.rc-front { border-color: var(--accent-edge); }
.rc-bar {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 5px 0 12px; flex: none;
  background: var(--head); border-bottom: 1px solid var(--line); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.rc-bar:active { cursor: grabbing; }
.rc-bar > svg { width: 16px; height: 16px; flex: none; color: var(--tone); }
.rc-bar b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-btn { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--dim); cursor: pointer; display: grid; place-items: center; flex: none; }
.rc-btn svg { width: 15px; height: 15px; }
.rc-btn:hover { background: var(--line2); color: var(--text); }
.rc-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px; }
.rc-empty { min-height: 120px; height: 100%; box-sizing: border-box; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--faint); text-align: center; }
.rc-empty svg { width: 28px; height: 28px; color: var(--tone); opacity: .55; }
.rc-empty p { margin: 0; }
.rc-win.rc-shut { height: auto !important; min-height: 0; }
.rc-win.rc-shut .rc-body, .rc-win.rc-shut .rc-grip { display: none; }
.rc-win.rc-shut .rc-bar { border-bottom: 0; }
/* 中身に合わせる窓（fit。出勤登録。fitwin-2026-10-04 利用者「もっと初期値　小さく　出力内容によって大きくなればいい」）。高さは中身どおり
   （上の max-height まで。超えた分は .rc-body の中で流す）。大きさは中身で決まるので、右下のつまみは出さない */
.rc-win.rc-fit .rc-grip { display: none; }
.rc-grip {
  position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; cursor: nwse-resize; touch-action: none; opacity: .6;
  background: linear-gradient(135deg, transparent 55%, var(--faint) 55% 62%, transparent 62% 74%, var(--faint) 74% 81%, transparent 81%);
}

/* ── 出勤登録の窓（HLUT の出勤登録と同じ中身。2026-09-29） ── */
.rc-body.rc-body-att { padding: 12px 14px; }
.rc-att { display: grid; gap: 8px; align-content: start; font-size: 12px; }
.rc-att-desc { margin: 0; color: var(--dim); }
.rc-att-text, .rc-att-castin {
  box-sizing: border-box; font: inherit; font-size: 12px; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px; min-width: 0;
}
.rc-att-text { width: 100%; min-height: 76px; resize: none; overflow-y: hidden; line-height: 1.55; padding: 6px 8px; }
.rc-att :is(textarea, input, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rc-att-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.rc-att-btn { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 4px 12px; cursor: pointer; font-weight: 500; white-space: nowrap; }
.rc-att-btn:hover:not(:disabled) { border-color: var(--accent-edge); }
.rc-att-btn.rc-pri { background: var(--accent); border-color: var(--accent); color: var(--rc-on-accent); }
.rc-att-btn:disabled { opacity: .45; cursor: default; }
.rc-att-msg { margin: 0; padding: 6px 8px; border-radius: 6px; background: var(--accent-wash); }
.rc-att-msg.rc-att-err { background: var(--vermil-wash, rgba(168, 52, 31, .06)); color: var(--vermil); }
.rc-att-result { display: grid; gap: 8px; border-top: 1px solid var(--line2); padding-top: 8px; }
.rc-att-cast { display: flex; align-items: center; gap: 8px; }
.rc-att-lb { color: var(--faint); font-size: 11px; white-space: nowrap; }
.rc-att-combo { position: relative; flex: 1; min-width: 0; max-width: 260px; }
.rc-att-castin { width: 100%; padding: 4px 8px; }
.rc-att-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 5; max-height: 240px; overflow: auto; padding: 3px 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 22px var(--rc-shadow);
}
.rc-att-opt { padding: 4px 10px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.rc-att-opt small { color: var(--faint); white-space: nowrap; }
.rc-att-opt:hover { background: var(--accent-wash); }
.rc-att-sep { padding: 4px 10px 2px; margin-top: 3px; font-size: 10.5px; color: var(--faint); border-top: 1px solid var(--line2); }
.rc-att-none { padding: 6px 10px; color: var(--faint); }
.rc-att-badge { font-size: 10.5px; line-height: 18px; padding: 0 8px; border-radius: 9px; white-space: nowrap; background: var(--accent-wash); color: var(--accent); border: 1px solid var(--accent-edge); }
.rc-att-sum { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
/* 列の幅は px で固定する（em にすると、字の小さい見出しと中身で列の幅が変わってずれた。2026-09-29 利用者「タイトル 内容がずれてる」） */
/* 9 列: 日付・開始・終了・終了条件・状態・色（残り）・体験・二日目・コメント・削除（2026-09-29 利用者「もっと詰める 1行目に 体験 二日目 … コメントは一番右に」）。
   体験・二日目は 1 列（利用者「… 初期値と体験と二日目の選択肢 でプルダウン」）。幅は見出し「体験・二日目」が収まる 66px */
/* 10 列目は現在値（attfit1-2026-10-20 利用者「内容を読み取る　の後表示される内容が全てスクロールなしでも見れるように」。前は直す行の下にもう 1 段。
   1 日 1 段に収める。収まらない字は … で、札の説明に全文） */
.rc-att-row {
  display: grid; grid-template-columns: var(--rc-att-columns, 92px 40px 40px 44px 60px minmax(0, 1fr) 66px 44px 168px 26px); gap: 0 4px;
  padding: 2px 6px; align-items: baseline; font-variant-numeric: tabular-nums;
}
.rc-att-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-att-row > span.rc-att-colors { white-space: normal; }
.rc-att-chip { display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; white-space: nowrap; }
.rc-att-chip i { width: 9px; height: 9px; border-radius: 2px; border: 1px solid var(--line); flex: none; }
.rc-att-head { background: var(--head); color: var(--faint); font-size: 10.5px; border-bottom: 1px solid var(--line); }
.rc-att-item { border-top: 1px solid var(--line2); padding-block: 1px; }
.rc-att-rows > .rc-att-item:first-child { border-top: 0; }
.rc-att-skipped .rc-att-edit, .rc-att-skipped .rc-att-sub { opacity: .55; }
.rc-att-skipnote { color: var(--vermil); }
.rc-att-note { color: var(--dim); font-size: 11px; }
.rc-att-note .rc-att-wide { grid-column: 2 / -1; white-space: normal; }
.rc-att-com .rc-att-wide { white-space: pre-wrap; }
/* 別の時間帯の上書きを止める行（attguard-2026-11-02）。文のあとに釦を並べる */
.rc-att-note.rc-att-over .rc-att-wide { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.rc-att-note.rc-att-over.rc-att-bad { color: var(--vermil); font-weight: 500; }
/* 本文の時刻の組が読み取った行に無いときの知らせ（attread-2026-11-02） */
.rc-att-doubt { margin: 6px 0; color: var(--vermil); font-size: 12px; font-weight: 500; }
.rc-att-doubt .rc-att-cadd { margin-left: 8px; font-weight: 400; }
.rc-att-cur, .rc-att-curnote { color: var(--faint); font-size: 11px; }
.rc-att-row > span.rc-att-now { color: var(--faint); font-size: 11px; white-space: normal; overflow-wrap: anywhere; }
.rc-att-now i { display: inline-block; width: 9px; height: 9px; margin-right: 2px; border-radius: 2px; border: 1px solid var(--line); vertical-align: -1px; }
.rc-att-row > span.rc-att-now.rc-att-skipnote, .rc-att-row > span.rc-att-now.rc-att-bad { color: var(--vermil); }
.rc-att-row > span.rc-att-nowsame { opacity: .7; }
/* 読み取ったあとも本文は全文表示し、説明の字だけ隠す。 */
.rc-att-done .rc-att-desc { display: none; }
/* 読み取り中は前の結果を薄くして残す（押せない）。先に消して窓が縮むと、常に手前の窓を広げられなくなるため（attfit2-2026-10-20） */
.rc-att-reading .rc-att-result { opacity: .45; pointer-events: none; }
.rc-att-bad { color: var(--vermil); }
.rc-att-off { color: var(--vermil); font-weight: 500; }
/* 表の行のまま直す（2026-09-29 利用者「編集 はボタン不要 そのまま編集できるように コメント 体験 二日目 の選択も追加」）。
   選び口は枠の無い文字のまま（自社の出勤の表と同じ考え）。押せる所は点線の下線と、触れたときのうっすらした地で示す。
   見えているのは select のすぐ後ろの欄（input.rc-att-cbin。select は値の入れ物として隠す）。押すと開く一覧はほかのページと同じ .cbpop
   （attcb-2026-10-04 利用者「このプルダウンのUI　が他のと合っていない　確認して」。前はブラウザの細い一覧） */
.rc-att-edit .rc-att-cbin, .rc-att-sub textarea {
  appearance: none; -webkit-appearance: none; box-sizing: border-box; max-width: 100%; margin: 0; padding: 1px 2px;
  border: 0; border-bottom: 1px dotted var(--faint); border-radius: 3px 3px 0 0; background: transparent;
  font: inherit; font-size: 12px; color: inherit; cursor: pointer; field-sizing: content;
}
.rc-att-edit .rc-att-cbin:hover:not(:disabled), .rc-att-sub textarea:hover:not(:disabled) { background: var(--accent-wash); }
.rc-att-edit .rc-att-cbin:focus-visible, .rc-att-sub :is(textarea, input):focus-visible { outline-offset: -1px; }
.rc-att-edit .rc-att-cbin:disabled, .rc-att-sub textarea:disabled, .rc-att-sub input:disabled {
  cursor: default; border-bottom-color: transparent; opacity: 1; color: inherit;
}
.rc-att-edit .rc-att-cbin.rc-att-off { color: var(--vermil); font-weight: 500; }
/* 体験・二日目は初期値が空。空でも押せる幅（点線の下線）を残す */
.rc-att-edit .rc-att-cbin.rc-att-kind { min-width: 40px; }
/* 開いている欄は打てる（字の所に縦棒）。いま入っているものは薄い字で残す（ほかのページの検索付きプルダウンと同じ）。
   空でも押せる幅を残す（色を足す「＋」は開くと空になる）。一覧の色見本は色の欄だけ（閉じた欄の札と同じ大きさ） */
.rc-att-edit .rc-att-cbin { min-width: 14px; }
.rc-att-edit .rc-att-cbin.rc-att-open { cursor: text; }
.rc-att-edit .rc-att-cbin::placeholder { color: var(--dim); opacity: 1; }
.rc-att-pop .cbrow i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 2px; border: 1px solid var(--line); vertical-align: -1px; }
.rc-att-row > .rc-att-colors { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; overflow: visible; }
.rc-att-colors .rc-att-chip { margin-right: 0; }
.rc-att-addcolor { color: var(--accent); font-weight: 600; padding-inline: 6px !important; }
.rc-att-sub { padding-top: 0; }
.rc-att-sublb { font-size: 10.5px; color: var(--faint); }
.rc-att-row > .rc-att-subwide { grid-column: 2 / -1; display: flex; align-items: flex-start; gap: 10px; min-width: 0; white-space: normal; overflow: visible; }
.rc-att-sub textarea { flex: 1; min-width: 0; min-height: 18px; resize: none; overflow-y: hidden; line-height: 1.45; cursor: text; }
.rc-att-sub textarea::placeholder { color: var(--faint); }
/* コメントの「追加」ボタン（押すと 2 行目に入力欄。2026-09-29 利用者「コメントは 追加ボタン」）と「あり」 */
.rc-att-cadd {
  border: 1px solid var(--line); background: var(--panel); color: var(--accent); padding: 0 6px; border-radius: 4px;
  font: inherit; font-size: 11px; line-height: 17px; cursor: pointer; white-space: nowrap;
}
.rc-att-cadd:hover:not(:disabled) { background: var(--accent-wash); border-color: var(--accent-edge); }
.rc-att-cadd:disabled { cursor: default; color: var(--faint); background: none; }
.rc-att-has { color: var(--accent); font-size: 11px; }
.rc-att-link { border: 0; background: none; color: var(--vermil); cursor: pointer; font-size: 11px; padding: 0; white-space: nowrap; }
.rc-att-foot { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line2); padding-top: 8px; }
.rc-att-grow { flex: 1; }
.rc-att-state { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--faint); }
.rc-att-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.rc-att-state[data-s="反映済み"]::before { background: var(--jade); }
.rc-att-state[data-s="送信中"]::before { background: var(--amber); }
.rc-att-state[data-s="失敗"]::before { background: var(--vermil); }

/* ── ドライバー詳細の窓（2026-10-01 利用者「リモコン　ドライバー詳細に　現在幅くらいで見やすく　ドライバー詳細を反映して」） ──
   10/3 から 1 人 1 行（下の drvwin-2026-10-03 の節。窓は 480 幅）。ここから下の 2 行の形は 10/2 までの話：
   左のメニューのドライバー詳細と同じ中身を 1 人 2 行に（窓は 400 幅）。1 行目 名前・出勤時間・タオル（新・済）・状態（本日出勤・出勤中・退勤・
   対象外 のプルダウン。地の色はページと同じ）、2 行目 所持バッグ・所持（2026-10-02 利用者「出勤　タオル　は名前の横　バックが２行目」。
   前は 2 行目に 出勤時間・新・済・所持、3 行目に所持バッグ）。選び口はほかのページの検索付きプルダウンと
   同じ見た目（app.css の .combo > .cbin・.cbpop・.cbrow をそのまま使う。同じ日 利用者「他ページのプルダウンに合わせる」）。
   別窓（body.rc-pip）では .rc-layer の [hidden] の決まりが届かないので、この中にも持つ */
.rc-body.rc-body-drv { padding: 10px 12px; }
.rc-drv { display: grid; gap: 6px; align-content: start; font-size: 12px; font-variant-numeric: tabular-nums; }
.rc-drv [hidden] { display: none !important; }
.rc-drv-top { display: flex; align-items: center; gap: 4px; }
.rc-drv-day { font-size: 12.5px; font-weight: 600; white-space: nowrap; padding-inline: 2px; }
.rc-drv-day.rc-drv-other { color: var(--amber); }
.rc-drv-step {
  width: 24px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--dim);
  cursor: pointer; font-size: 14px; line-height: 1;
}
.rc-drv-step:hover { border-color: var(--accent-edge); color: var(--text); }
.rc-drv-today { margin-left: auto; padding: 1px 10px; }
.rc-drv-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; color: var(--dim); font-size: 11.5px; }
.rc-drv-sum b { color: var(--text); font-size: 12.5px; }
.rc-drv-owed { margin-left: auto; }
/* 引継ぎ内容（handover-2026-10-29）：日付の下。見出し・保存の様子・最後に書いた人・［履歴］の 1 行と、2 行から打った行の数だけ伸びる欄
   （メモ帳と同じ部品 .rc-memo-*。字と枠はドライバー詳細の自由入力 .rc-wait-note と同じ）。履歴は欄の場所に出し、長ければ中で流す */
.rc-ho { display: grid; gap: 4px; min-width: 0; }
.rc-ho-head { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 22px; font-size: 11px; color: var(--faint); }
.rc-ho-title { flex: none; font-size: 12px; font-weight: 600; color: var(--text); }
.rc-ho-head .rc-memo-state { flex: none; }
.rc-ho-head .rc-memo-who { flex: 1 1 auto; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-ho .rc-memo-text.rc-ho-text {
  display: block; min-height: calc(3em + 10px); padding: 4px 6px; border-radius: 4px; background: var(--panel); font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; scrollbar-gutter: auto;
}
.rc-ho .rc-memo-text.rc-ho-text:disabled, .rc-ho .rc-memo-text.rc-ho-text[readonly] { background: var(--panel2); }
.rc-ho .rc-memo-hist, .rc-ho .rc-memo-one { min-height: 0; }
.rc-ho .rc-memo-histlist, .rc-ho .rc-memo-diff { max-height: 260px; }
/* 1 人 1 行（drvwin-2026-10-03 利用者「一行にしよう　バック個数　所持は名前右　＋は青　－は赤　で　タオル右に表示　展開できるように
   順番はタスクキャスト同様に入れ替えれるように」）：⠿・名前・バッグの個数・所持・出勤・タオル・状態。言葉の見出しは上の 1 行（.rc-drv-head）。
   名前のほかは幅を決めて、人ごとに縦がそろうように（2026-10-02 利用者「の行がずれてる　から整理する」）。
   一覧は overflow: clip（角は丸く切るが流れる箱にはしない。hidden だと見出しが一覧の中でしか留まらず、窓を流すと見出しが消える）。
   見出しは窓の中身（.rc-body。上の余白 10px）を流しても上に残る（top は余白のぶん上へ） */
.rc-drv-list { position: relative; display: grid; border: 1px solid var(--line); border-radius: 6px; overflow: clip; }
.rc-drv-item { display: grid; gap: 3px; padding: 4px 8px; border-top: 1px solid var(--line2); cursor: pointer; }
.rc-drv-item > .rc-drv-more, .rc-drv-item > .rc-drv-leave { cursor: auto; }
.rc-drv-item:first-child, .rc-drv-head + .rc-drv-item { border-top: 0; }
/* 並びは ⠿▸名前・所持・バッグ ｜ 空き ｜ 出勤・新・済・状態（drvwin2-2026-10-03 利用者「所持　は名前の横　新　済　数字と行があってない」）。
   名前の欄はいちばん長い名前の幅（--drv-name。drvRender が決める。窓が狭ければ縮む）。余りは空き（.rc-drv-gap）へ */
.rc-drv-l1 { display: grid; grid-template-columns: minmax(0, var(--drv-name, 110px)) 54px 26px minmax(0, 1fr) 62px 28px 28px 74px; align-items: center; column-gap: 5px; min-width: 0; }
.rc-drv-nomoney .rc-drv-l1 { grid-template-columns: minmax(0, var(--drv-name, 110px)) 26px minmax(0, 1fr) 62px 28px 28px 74px; }
/* 新・済は 1 つずつの欄で、字は左・数は右（数の縦がそろう）。見出しの「タオル」と、本日出勤でない人の — は 2 つの欄にまたがる */
.rc-drv-tw1 { display: flex; align-items: baseline; justify-content: space-between; gap: 2px; min-width: 0; white-space: nowrap; }
.rc-drv-tw2 { grid-column: span 2; text-align: center; }
.rc-drv-towelcell { min-width: 0; }
.rc-drv-towelcell > .dtowel-controls { width: 100%; font-size: inherit; }
.rc-drv-towelcell .dtowel-count > span { color: var(--faint); font-size: 10.5px; }
.rc-drv-open > .rc-drv-l1 { align-items: start; }
.rc-drv-head {
  position: sticky; top: -10px; z-index: 1; padding: 3px 8px; background: var(--panel2); border-bottom: 1px solid var(--line2);
  color: var(--faint); font-size: 10.5px; line-height: 1.4; white-space: nowrap;
}
.rc-drv-head .rc-drv-c { text-align: center; }
.rc-drv-head .rc-drv-r { text-align: right; }
.rc-drv .rc-drv-all, .rc-drv .rc-drv-name {
  display: inline-flex; align-items: center; gap: 3px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.rc-drv-canmove .rc-drv-head .rc-drv-all { padding-left: 17px; }
/* 対象外の人の前の見出しの行（押すとしまう・ひらく。drvoff-2026-10-03 利用者「対象外は　閉じれるように」） */
.rc-drv-grp { padding: 3px 8px; border-top: 1px solid var(--line2); background: var(--panel2); }
.rc-drv-head + .rc-drv-grp { border-top: 0; }
.rc-drv .rc-drv-offbtn {
  display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: var(--dim); font: inherit;
  font-size: 11.5px; cursor: pointer;
}
.rc-drv .rc-drv-offbtn b { color: var(--text); font-weight: 600; }
.rc-drv-canmove .rc-drv-grp .rc-drv-offbtn { padding-left: 17px; }
.rc-drv-caret { flex: none; width: 9px; font-style: normal; font-size: 9px; color: var(--faint); }
.rc-drv-who { display: flex; align-items: center; gap: 3px; min-width: 0; }
.rc-drv .rc-drv-grip {
  flex: none; width: 14px; height: 20px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--faint);
  font-size: 12px; line-height: 1; cursor: grab; touch-action: none;
}
.rc-drv .rc-drv-grip:hover { color: var(--text); background: var(--panel3); }
.rc-drv-name b { min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-drv-bagn { text-align: center; font-weight: 600; cursor: pointer; }
.rc-drv-money { min-width: 0; text-align: right; white-space: nowrap; cursor: pointer; }
.rc-drv-money b { font-weight: 600; }
/* 所持は ＋ を青・− を赤（所持総額も。所持総額の字は .rc-drv-sum b の黒が強いので、そこにも書く。前は所持総額の赤も効いていなかった） */
.rc-drv-plus, .rc-drv-sum b.rc-drv-plus { color: var(--accent); }
.rc-drv-sum b.rc-drv-minus { color: var(--vermil); }
.rc-drv-start { display: inline-flex; align-items: center; gap: 2px; min-width: 0; white-space: nowrap; }
/* 展開した下（バッグの番号・所持のグループごと）。名前の字の下からそろえる */
.rc-drv-more { display: grid; gap: 3px; padding: 1px 0 2px 12px; }
.rc-drv-canmove .rc-drv-more { padding-left: 29px; }
/* 退勤の確かめ（deskleave-2026-10-04）：所持バッグのある人に「退勤」を選んだとき、その人の行の下に注意書きと［確認した］［やめる］ */
.rc-drv-leave { margin: 3px 0 6px 12px; padding: 7px 9px; display: grid; gap: 6px; border: 1px solid var(--amber-dim, #e0bd82);
                border-left: 3px solid var(--amber, #8a5a12); border-radius: 6px; background: var(--amber-wash, rgba(138, 90, 18, .07)); }
.rc-drv-canmove .rc-drv-leave { margin-left: 29px; }
.rc-drv-leavemsg { margin: 0; font-size: 12.5px; line-height: 1.55; }
.rc-drv-leavemsg b { color: var(--amber, #8a5a12); }
.rc-drv-leavebtns { display: flex; gap: 6px; justify-content: flex-end; }
.rc-drv-leavebtns .rc-drv-leaveok { border-color: var(--amber, #8a5a12); color: var(--amber, #8a5a12); font-weight: 700; }
.rc-drv-parts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.rc-drv-parts b { font-weight: 600; }
/* つまんで動かしている人と、置く所の線 */
.rc-drv-item.rc-drv-lifted { opacity: .5; }
.rc-drv-drop { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); pointer-events: none; z-index: 2; }
/* 状態と出勤時間の選び口（同じ日 利用者「本日出勤　出勤中　退勤　休み　のプルダウンに変更」「他ページのプルダウンに合わせる」）。
   見た目は app.css の検索付きプルダウン（.combo > .cbin・色のある選択肢は hexed）のまま。ここでは幅と字の大きさだけ決める */
.rc-drv-cb { flex: none; }
.rc-drv-cb > .cbin { font-size: 11.5px; padding-top: 1px; padding-bottom: 1px; }
.rc-drv-cb > .cbin:disabled { cursor: default; opacity: 1; }
.rc-drv-l1 > .rc-drv-cb { width: 74px; }
.rc-drv-clock .rc-drv-cb { width: 62px; }
.rc-drv-clock .rc-drv-cb > .cbin { font-variant-numeric: tabular-nums; }
.rc-drv-lb { color: var(--faint); font-size: 10.5px; white-space: nowrap; }
.rc-drv-clock { display: inline-flex; align-items: baseline; }
/* 新タオル・済タオル（同じ日 利用者「タオルは　新　済　両方記載」） */
.rc-drv-tw { font-weight: 600; margin-right: 4px; }
.rc-drv-tw:last-child { margin-right: 0; }
.rc-drv-carried .cbin { color: var(--dim); }
.rc-drv-none { color: var(--faint); }
.rc-drv-minus { color: var(--vermil); }
.rc-drv-bags { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-height: 19px; }
.rc-drv-bags i {
  font-style: normal; display: inline-flex; align-items: baseline; gap: 3px; padding: 0 7px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); font-size: 11px; line-height: 17px; font-weight: 600; white-space: nowrap;
}
.rc-drv-bags small { font-size: 10px; font-weight: 400; color: var(--dim); max-width: 6em; overflow: hidden; text-overflow: ellipsis; }
.rc-drv-rest .rc-drv-name b { color: var(--dim); font-weight: 400; }
.rc-drv-rest .rc-drv-bagn, .rc-drv-rest .rc-drv-money, .rc-drv-rest .rc-drv-start, .rc-drv-rest .rc-drv-tw1, .rc-drv-rest .rc-drv-tw2, .rc-drv-rest .rc-drv-more { opacity: .75; }
.rc-drv-emptytext { margin: 0; padding: 10px; }
/* 事務所の行・経費の追加の欄・経費の └ の行（drvspend-2026-10-20 利用者「ドライバー詳細の　本日出勤 9 / 23　所持総額 94,200　の下に　経費の追加
   を作成　ドライバー個人締め同様　スタッフ選択」→「事務所事務所金　189,200 円　も表示しよう　事務所の経費も展開できるように」「窓でも見えて消せる」）。
   事務所の行は日報報告の事務所の行と同じ青（--board-head・白い字。マイナスは青の上でも読める赤）。押すと下に事務所の経費。
   経費の欄は 2 行（種別・スタッフ・種類・向き／額・内容・［追加］）。選び口の見た目は状態・出勤時間と同じ .rc-drv-cb */
.rc-drv-spend { display: grid; gap: 5px; }
.rc-spend-office {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 3px 8px; border-radius: 6px;
  background: var(--board-head); color: var(--board-head-ink); cursor: pointer;
}
.rc-spend-office.rc-spend-open { border-radius: 6px 6px 0 0; }
.rc-drv .rc-spend-ofold {
  display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.rc-spend-office .rc-drv-caret { color: inherit; opacity: .8; }
.rc-spend-fund { font-size: 11.5px; white-space: nowrap; opacity: .92; }
.rc-spend-fund b { font-size: 12.5px; font-weight: 600; }
.rc-spend-fund b.rc-spend-fminus { color: var(--mark-red-rev); }
.rc-spend-closed { margin-left: auto; padding: 0 6px; border: 1px solid currentColor; border-radius: 8px; font-size: 10.5px; opacity: .85; }
.rc-spend-orows { margin-top: -5px; padding: 3px 8px 4px 20px; border: 1px solid var(--line2); border-top: 0; border-radius: 0 0 6px 6px; background: var(--panel2); }
/* 経費の └ の行：└・種類（委託費に付く・本家・払ったスタッフ・内容）・額（＋青・−赤）・✕ */
.rc-spend-rows { display: grid; gap: 1px; min-width: 0; }
.rc-spend-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 18px; align-items: center; column-gap: 4px; min-width: 0; font-size: 11.5px; }
.rc-spend-mark { color: var(--faint); }
.rc-spend-what { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-spend-yen { text-align: right; white-space: nowrap; }
.rc-spend-yen b { font-weight: 600; }
.rc-spend-auto, .rc-spend-grp { margin-left: 6px; font-size: 10px; color: var(--faint); white-space: nowrap; }
.rc-spend-grp { margin: 0 6px 0 0; }
.rc-spend-auto.rc-spend-mind { padding: 0 5px; border: 1px solid var(--tone-dim); border-radius: 8px; color: var(--dim); }
.rc-spend-who { margin-left: 6px; font-size: 11px; color: var(--dim); }
.rc-spend-memo { margin-left: 6px; font-size: 10.5px; color: var(--faint); }
.rc-drv .rc-spend-x {
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--faint); font: inherit; font-size: 11px;
  line-height: 18px; cursor: pointer;
}
.rc-drv .rc-spend-x:hover:not(:disabled) { color: var(--vermil); background: var(--panel3); }
.rc-drv .rc-spend-x:disabled { opacity: .45; cursor: default; }
/* ドライバーの名前を押して開いた下の「経費」 */
.rc-spend-list { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.rc-spend-list > .rc-spend-rows { flex: 1; }
/* 経費の欄：1 行目 種別・スタッフ・種類・向き・額、2 行目 内容・［追加］（drvspend2-2026-10-20 利用者「金額も１行目におさまるように　内容　追加ボタン
   で２行目を使う　入力ボックス内容が増えれば　その分行数がのびてよい」）。内容は折り返して行が伸びる書く欄（高さは drvSpendFit が字に合わせる） */
/* drvspend3（同じ日 利用者「金額も追加ボタンより左側におさまるように詰めよう　名前や委託費などの内容で伸びる場合はのびればよい　追加ボタンの列は
   伸びてこない場合は　追加ボタンが内容の底辺と一緒」）：左の列に 1 行目と内容、右の列に［追加］だけ（2 行にまたがり、内容の底にそろえる）。
   選び口の幅は選んでいる字の幅（--w。drvSpendCbW）。スタッフと種類は余りがあれば伸び、1 行に入らなければ折り返す */
.rc-spend-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; }
.rc-spend-l1 { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.rc-spend-l2 { grid-column: 1; display: flex; min-width: 0; }
.rc-spend-l1 > .rc-drv-cb { flex: 0 0 var(--w, 64px); min-width: 0; max-width: 100%; }
.rc-spend-l1 > .rc-drv-cb[data-f="swho"], .rc-spend-l1 > .rc-drv-cb[data-f="skind"] { flex-grow: 1; }
/* 向きが片方だけの種別は選べない（字は濃いまま。日報報告の .xsign:disabled と同じ） */
.rc-spend-l1 > .rc-drv-cb > .cbin:disabled { background-color: var(--panel2); color: var(--text); }
.rc-spend-l1 .rc-spend-amount { flex: 0 0 60px; min-width: 0; font-size: 11.5px; padding-top: 1px; padding-bottom: 1px; text-align: right; }
.rc-spend-l2 .rc-spend-text {
  flex: 1 1 auto; min-width: 0; font-size: 11.5px; line-height: 1.45; padding-top: 2px; padding-bottom: 2px;
  resize: none; overflow: hidden; overflow-wrap: anywhere;
}
.rc-spend-go { grid-column: 2; grid-row: 1 / span 2; align-self: end; padding: 2px 14px; }
.rc-spend-add > .rc-spend-hint { grid-column: 1 / -1; }
.rc-spend-hint { margin: 0; font-size: 11px; color: var(--dim); }
.rc-spend-note { margin: 0; font-size: 11.5px; color: var(--dim); }
.rc-spend-msg { font-size: 11.5px; }
/* 仕事バッグの箱（bagdesk-2026-10-09 利用者「ドライバー詳細に　仕事バック詳細を出す　どのバックを誰が今所持しているのか　ドライバーボックスの
   下に配置」→ 同じ日 bagdesk2 利用者「もっと横並びで行を増やさず全バックがどこにあるか　またバックをキャスト、ドライバーに移動できるように」）。
   ドライバーの一覧の箱（.rc-drv-list）の下に同じ枠。見出しの 1 行（押すとしまう・ひらく）・1〜40 番の札（窓の幅で折り返す。1 つ 46px から。
   前は持ち出しの番号を 1 行ずつ）・下の 1 行（色の見方。選んでいれば 選んだ番号 → 移す先 ［移す］［外す］） */
.rc-bagbox { display: grid; border: 1px solid var(--line); border-radius: 6px; overflow: clip; }
.rc-bag-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 3px 8px; background: var(--panel2); color: var(--dim);
  font-size: 11.5px; white-space: nowrap;
}
.rc-bagbox > .rc-bag-head:not(:last-child) { border-bottom: 1px solid var(--line2); }
.rc-drv .rc-bag-fold {
  display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: var(--text); font: inherit;
  font-weight: 600; cursor: pointer;
}
.rc-bag-title { color: var(--text); font-weight: 600; }
.rc-bag-sum b { color: var(--text); font-weight: 600; }
.rc-bag-time { margin-left: auto; color: var(--faint); font-size: 10.5px; }
/* 見出しの［履歴］（bagdesk3-2026-10-09）。開いている間は青 */
.rc-drv .rc-bag-histbtn {
  align-self: center; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--dim); font: inherit;
  font-size: 11px; line-height: 18px; cursor: pointer;
}
.rc-drv .rc-bag-histbtn:hover, .rc-drv .rc-bag-histbtn.on { color: var(--accent); border-color: var(--accent-edge); background: var(--accent-wash); }
.rc-bag-grp { padding: 4px 8px 0; color: var(--dim); font-size: 11px; font-weight: 600; }
.rc-bag-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 3px; padding: 6px 8px; user-select: none; -webkit-user-select: none;
}
.rc-drv .rc-bag-tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; height: 34px; margin: 0;
  padding: 2px 4px 1px; border: 1px solid var(--line2); border-radius: 5px; background: var(--panel); color: var(--text); font: inherit;
  text-align: left; line-height: 1;
}
.rc-bag-tile b { font-size: 12px; line-height: 14px; font-weight: 700; }
/* 前の日から動いていない番号は右上に日数 */
.rc-bag-tile i { position: absolute; top: 2px; right: 3px; font-style: normal; font-size: 9.5px; line-height: 12px; font-weight: 700; color: var(--amber, #8a5a12); }
.rc-bag-tile small {
  display: block; min-height: 13px; font-size: 10px; line-height: 13px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-drv .rc-bag-t-staff { background: var(--accent-wash); border-color: var(--accent-edge); }
.rc-bag-t-staff small { color: var(--accent); font-weight: 600; }
.rc-drv .rc-bag-t-cast { background: var(--amber-wash, rgba(138, 90, 18, .07)); border-color: var(--amber-dim, #e0bd82); }
.rc-bag-t-cast small { color: var(--amber, #8a5a12); font-weight: 600; }
/* 今日 退勤・対象外 の人の手にある番号（返し忘れの見込み） */
.rc-drv .rc-bag-t-warn { border-color: var(--vermil); }
.rc-bag-t-warn small { color: var(--vermil); }
.rc-bag-canpick .rc-bag-tile { cursor: pointer; }
.rc-drv .rc-bag-canpick .rc-bag-tile:hover { border-color: var(--accent); }
.rc-drv .rc-bag-tile.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.rc-bag-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 4px 8px; border-top: 1px solid var(--line2); background: var(--panel2);
  color: var(--dim); font-size: 11px;
}
.rc-bag-key { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.rc-drv .rc-bag-k { display: inline-block; width: 10px; height: 10px; margin-left: 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); }
.rc-drv .rc-bag-k:first-child { margin-left: 0; }
.rc-drv .rc-bag-k.rc-bag-t-staff { background: var(--accent-wash); border-color: var(--accent-edge); }
.rc-drv .rc-bag-k.rc-bag-t-cast { background: var(--amber-wash, rgba(138, 90, 18, .07)); border-color: var(--amber-dim, #e0bd82); }
/* 未使用（bagdesk3-2026-10-09）：斜線の地・点線の枠・番号も薄く */
.rc-drv .rc-bag-t-unused, .rc-drv .rc-bag-k.rc-bag-t-unused {
  background: repeating-linear-gradient(135deg, var(--panel2) 0 4px, var(--panel3) 4px 8px); border-style: dashed; border-color: var(--line);
}
.rc-bag-t-unused b, .rc-bag-t-unused small { color: var(--faint); }
.rc-bag-hint { margin-left: auto; color: var(--faint); }
.rc-bag-act { flex-wrap: nowrap; gap: 6px; }
.rc-bag-picked { flex: 0 1 auto; min-width: 0; max-width: 34%; color: var(--text); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-bag-arrow { flex: none; color: var(--faint); }
.rc-bag-to { flex: 1 1 auto; min-width: 120px; }
.rc-bag-to .rc-drv-cb { display: block; width: 100%; }
.rc-bag-act .rc-att-btn { flex: none; }
.rc-bag-msg { margin: 0; padding: 0 8px 5px; background: var(--panel2); color: var(--text); font-size: 11.5px; }
.rc-bag-msg.rc-bag-err { color: var(--vermil); }
/* 仕事バッグの自由入力（bagnote-2026-10-26）：下の 1 行・見出しの下に線を引いて置く（中身の見た目はタオル・待機所の自由入力と同じ） */
.rc-bagbox > .rc-wait-note-wrap { padding-top: 6px; border-top: 1px solid var(--line2); }
/* 動きの履歴（bagdesk3-2026-10-09）：見出し（番号で絞る選び口・［閉じる］）・1 行ずつ（いつ・番号・どこから → どこへ・操作・押した人） */
.rc-bag-hist { display: grid; gap: 4px; padding: 6px 8px 8px; border-top: 1px solid var(--line2); }
.rc-bag-hhead { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.rc-bag-hhead b { color: var(--text); font-weight: 600; white-space: nowrap; }
.rc-bag-hpick { flex: 0 1 150px; min-width: 110px; }
.rc-bag-hpick .rc-drv-cb { display: block; width: 100%; }
.rc-bag-hclose { margin-left: auto; }
.rc-bag-hrows { display: grid; }
.rc-bag-hrow {
  display: grid; grid-template-columns: 72px 22px minmax(0, 1fr) auto; align-items: baseline; column-gap: 6px; padding: 3px 0;
  border-top: 1px solid var(--line2); font-size: 11.5px;
}
.rc-bag-hrow:first-child { border-top: 0; }
.rc-bag-hat { color: var(--dim); font-size: 11px; white-space: nowrap; }
.rc-bag-hno { text-align: right; font-weight: 700; }
.rc-bag-hmove { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; min-width: 0; }
.rc-bag-hmove i { font-style: normal; color: var(--faint); }
.rc-bag-hk-staff { color: var(--accent); font-weight: 600; }
.rc-bag-hk-cast { color: var(--amber, #8a5a12); font-weight: 600; }
.rc-bag-hk-office { color: var(--dim); }
.rc-bag-hk-unused { color: var(--faint); }
.rc-bag-hact { color: var(--faint); font-size: 10.5px; white-space: nowrap; text-align: right; }
.rc-bag-hnone { margin: 0; padding: 4px 0; color: var(--faint); font-size: 11.5px; }
.rc-bag-hmore { justify-self: center; }

/* ドライバー詳細：仕事バッグの下にタオルと待機所。待機所は縦に1〜5・6〜7・8〜10の3列。 */
.rc-towelbox, .rc-waitbox { display: grid; min-width: 0; border: 1px solid var(--line); border-radius: 6px; overflow: clip; }
.rc-desk-head { padding: 4px 8px; color: var(--text); background: var(--panel2); border-bottom: 1px solid var(--line2); font-weight: 600; }
.rc-desk-group { padding: 4px 8px 0; color: var(--dim); font-size: 11px; font-weight: 600; }
.rc-towel-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; padding: 6px 8px; }
.rc-towel-row > span { white-space: nowrap; }
.rc-towel-row b { font-weight: 600; }
.rc-towel-office { margin-left: auto; }
.rc-towel-form, .rc-towel-form label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.rc-towel-form { margin: 0; }
.rc-drv .rc-towel-total { width: 64px; min-width: 0; padding: 2px 4px; font-size: 12px; font-variant-numeric: tabular-nums; }
.rc-towel-heading { display: flex; align-items: center; gap: 8px; }
.rc-towel-heading > .rc-att-btn { margin-left: auto; padding-block: 0; font-weight: 400; }
.rc-towel-form { flex-basis: 100%; min-width: 0; }
.rc-towel-form .rc-towel-reason-field { display: block; flex-basis: 100%; min-width: 0; }
.rc-towel-form .rc-required { color: var(--vermil); }
.rc-drv .rc-towel-reason { display: block; box-sizing: border-box; width: 100%; min-width: 0; margin-top: 3px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--text); font: inherit; line-height: 1.5; resize: vertical; }
.rc-towel-actions { display: flex; gap: 4px; margin-left: auto; }
.rc-towel-history { display: grid; min-width: 0; gap: 6px; padding: 6px 8px 8px; border-top: 1px solid var(--line2); }
.rc-towel-history-head { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.rc-towel-history-head .rc-att-btn { margin-left: auto; }
.rc-towel-history-entry { min-width: 0; padding: 6px 0; border-top: 1px solid var(--line2); font-size: 11.5px; overflow-wrap: anywhere; }
.rc-towel-history-meta, .rc-towel-history-change { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; }
.rc-towel-history-meta { color: var(--dim); font-size: 11px; margin-bottom: 3px; }
.rc-towel-history-reason { margin-top: 3px; white-space: pre-wrap; }
.rc-towel-history-reason > span { color: var(--dim); }
.rc-towel-history-more { justify-self: center; }
.rc-wait-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 6px 10px; padding: 7px 8px; }
.rc-wait-col { display: grid; align-content: start; gap: 5px; min-width: 0; }
.rc-wait-item { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 4px; min-width: 0; }
.rc-wait-item > b { font-size: 11.5px; font-weight: 600; text-align: right; }
.rc-wait-item .rc-drv-cb { display: block; width: 100%; min-width: 0; }
.rc-wait-item .cbin { width: 100%; text-overflow: ellipsis; }
/* 待機所の選び口の右の［×］（waitclear-2026-10-31）。3 つ目の欄は［×］があるときだけできる（見るだけの人は今までどおり 2 つ）。
   高さは行に伸ばして選び口とそろえ、枠・角・地は選び口の欄と同じ。だれもいない所・保存中は薄く押せない */
.rc-wait-item { grid-auto-columns: 18px; }
.rc-wait-clear {
  grid-column: 3; align-self: stretch; box-sizing: border-box; width: 18px; min-height: 0; padding: 0;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--dim); display: grid; place-items: center;
}
.rc-wait-clear svg { width: 11px; height: 11px; }
.rc-wait-clear:hover:not(:disabled) { color: var(--vermil); border-color: var(--vermil-dim); }
.rc-wait-clear:disabled { opacity: .35; cursor: default; }
.rc-wait-note-wrap { min-width: 0; padding: 0 8px 8px; }
.rc-wait-note { box-sizing: border-box; display: block; width: 100%; min-width: 0; min-height: calc(3em + 10px); margin: 0; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--text); font: inherit; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; resize: none; }
.rc-wait-note-error { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; font-size: 11px; }
.rc-wait-note-error .rc-att-btn { flex: none; margin-left: auto; }
.rc-desk-msg, .rc-desk-note { margin: 0; padding: 4px 8px 6px; color: var(--dim); font-size: 11.5px; overflow-wrap: anywhere; }
.rc-desk-msg.rc-att-err { color: var(--vermil); }

/* 待機所の下の社用車。車名と住所は分け、2つの日付と使用者を1台ごとに持つ。 */
.rc-vehiclebox { display: grid; min-width: 0; border: 1px solid var(--line); border-radius: 6px; overflow: clip; }
.rc-vehicle-heading, .rc-vehicle-grouphead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rc-vehicle-heading .rc-att-btn { padding-block: 0; font-weight: 400; }
.rc-vehicle-grouphead { padding: 5px 8px 0; color: var(--dim); font-size: 11px; }
.rc-vehicle-list { display: grid; gap: 6px; padding: 6px 8px; }
.rc-vehicle-card { min-width: 0; padding: 6px 7px; border: 1px solid var(--line2); border-radius: 5px; }
.rc-vehicle-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.rc-vehicle-top b { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.rc-vehicle-top .rc-att-btn { flex: none; margin-left: auto; }
.rc-vehicle-top .rc-vehicle-edit { min-height: 0; height: 20px; padding: 0 5px; font-size: 10px; line-height: 18px; }
.rc-vehicle-label, .rc-vehicle-info dt { flex: none; color: var(--dim); font-size: 11px; }
.rc-vehicle-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin: 5px 0 0; }
.rc-vehicle-info > div { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.rc-vehicle-info .rc-vehicle-wide { grid-column: 1 / -1; }
.rc-vehicle-info dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.rc-vehicle-user dd { flex: 1; }
.rc-vehicle-user .rc-drv-cb { display: block; width: 100%; min-width: 0; }
.rc-vehicle-user .cbin { width: 100%; min-width: 0; text-overflow: ellipsis; }
.rc-vehicle-form { margin: 0; }
.rc-vehicle-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.rc-vehicle-field { display: grid; gap: 2px; min-width: 0; color: var(--dim); font-size: 11px; }
.rc-vehicle-field input { box-sizing: border-box; width: 100%; min-width: 0; padding: 3px 5px; font-size: 12px; color: var(--text); }
.rc-vehicle-f-name, .rc-vehicle-f-address, .rc-vehicle-f-person { grid-column: 1 / -1; }
.rc-vehicle-f-person .rc-drv-cb { display: block; width: 100%; min-width: 0; }
.rc-vehicle-f-person .cbin { text-overflow: ellipsis; }
.rc-vehicle-actions { display: flex; justify-content: flex-end; gap: 5px; margin-top: 7px; }

/* ── 常に手前の窓（Chrome の文書のピクチャー・イン・ピクチャー。2026-09-29 利用者「クロームをこえれ…利用中も後ろに行くと困る」・
   ontop-2026-10-09 から伝票の窓なども同じ 1 枚の窓に札で並べる） ── */
/* 窓の中（body.rc-pip。app.js の ownTop が付ける）: 道具の中身（.rc-body）が札の中へ移る。.rc-layer の変数はここにも持たせる */
body.rc-pip {
  --rc-on-accent: var(--panel);
  --rc-shadow: var(--shadow-sign, rgba(16, 24, 40, .16));
  margin: 0; display: block; overflow: hidden; background: var(--panel); color: var(--text);
  font-family: var(--sans); font-size: 12px; line-height: 1.5;
}
body.rc-pip > .rc-body { height: 100vh; box-sizing: border-box; overflow: auto; }
body.rc-pip :where(button) { font: inherit; }
/* 常に手前の窓（ontop-2026-10-09。app.js の ownTop）: 道具の中身（.rc-body）は札の中いっぱい（札の中は app.css の .otnode）。
   画面の中の窓は隠して残す（閉じる・前へ出す・開いている印の仕組みはそのまま）。前の「別窓で表示中」の見た目はやめた */
/* 送り棒の幅はいつも空けておく（ontopfit-2026-10-09。送り棒が出る・消えるで中身の幅が変わると札の並び＝高さが変わり、窓の大きさを中身に
   合わせたあとで下が空く・足りなくなるため） */
.otnode > .rc-body { height: 100%; box-sizing: border-box; overflow: auto; scrollbar-gutter: stable; }
/* 常に手前の窓の中でも、道具の中の [hidden] は隠す（navfit-2026-10-10。画面の中の窓では .rc-layer [hidden] が効くが、窓の中へ移すと届かない。
   出勤登録は読み取る前から空の表・知らせの枠が見えて、窓が縦に長く送り棒も出ていた。予約確認・ドライバー詳細は道具ごとに持っていた） */
.rc-body [hidden] { display: none !important; }
.rc-win.rc-ontop { display: none; }
/* 常に手前の窓を開く前に中身を読んで測るあいだ（navfit-2026-10-10。remote.js の prepTop・measureTop）：見せずに置いて測る（display: none では
   測れない）。送り棒の幅は常に手前の窓（.otnode > .rc-body）と同じに空ける。待つ間はマウスの形を「読み込み中」に */
.rc-win.rc-prep { visibility: hidden; pointer-events: none; }
.rc-win.rc-prep > .rc-body { scrollbar-gutter: stable; }
html.rc-busy, html.rc-busy * { cursor: progress !important; }

@media (prefers-reduced-motion: reduce) {
  .rc-item, .rc-remote, .rc-remote svg, .rc-fan { transition: none !important; }
}

/* 予約確認の窓（rsvcheck-2026-10-06）。HLUT の予約確認ボックスと同じ並び：名前｜出勤｜本日出勤の点｜N件｜送信｜表示｜コピー。
   列は内容で動かさない（固定の幅。本日出勤でない人も点の枠は残す）。日の見出しは 16px の濃い字 */
.rc-rsv { display: grid; gap: 6px; align-content: start; font-size: 12px; font-variant-numeric: tabular-nums; }
.rc-rsv [hidden] { display: none !important; }
.rc-rsv-top { display: flex; align-items: center; gap: 8px; }
.rc-rsv-find {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px;
  background: var(--panel); color: var(--text); font: inherit;
}
.rc-rsv-badge { flex: none; padding: 1px 8px; border-radius: 10px; background: var(--accent-wash); color: var(--accent); font-weight: 600; }
.rc-rsv-list { display: grid; gap: 10px; }
.rc-rsv-day h4 { margin: 0 0 2px; font-size: 16px; font-weight: 700; color: var(--text); }
.rc-rsv-row {
  display: grid; grid-template-columns: 5.4em 92px 16px 34px 74px 24px 24px; align-items: center; column-gap: 6px;
  padding: 3px 0; border-top: 1px solid var(--line2);
}
.rc-rsv-name { overflow: hidden; white-space: nowrap; font-weight: 600; color: var(--text); }
.rc-rsv-shift { color: var(--dim); white-space: nowrap; }
.rc-rsv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jade); justify-self: center; }
.rc-rsv-dot.rc-off { visibility: hidden; }
.rc-rsv-count { text-align: right; white-space: nowrap; }
.rc-rsv-sent, .rc-rsv-chip {
  border: 1px solid var(--vermil-dim); border-radius: 10px; padding: 1px 6px; background: var(--panel); color: var(--vermil);
  font: inherit; font-size: 11px; white-space: nowrap; text-align: center; cursor: pointer;
}
span.rc-rsv-sent, span.rc-rsv-chip { cursor: default; }
.rc-rsv-sent.rc-on, .rc-rsv-chip.rc-on { color: #fff; background: var(--jade); border-color: var(--jade); }
:root[data-theme="dark"] .rc-rsv-sent.rc-on, :root[data-theme="dark"] .rc-rsv-chip.rc-on { color: #0b1f17; }
.rc-rsv-sent:disabled, .rc-rsv-chip:disabled { opacity: .5; cursor: default; }
.rc-rsv-eye, .rc-rsv-copy {
  width: 24px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--panel);
  color: var(--dim); cursor: pointer; display: grid; place-items: center;
}
.rc-rsv-eye svg, .rc-rsv-copy svg { width: 15px; height: 15px; }
.rc-rsv-eye.rc-on { color: var(--accent); border-color: var(--accent-edge); }
.rc-rsv-copy.rc-done { color: var(--jade); }
.rc-rsv-copy.rc-bad { color: var(--vermil); }
.rc-rsv-detail { display: grid; gap: 8px; padding: 4px 0 8px 10px; }
.rc-rsv-slip { display: grid; gap: 1px; }
.rc-rsv-shead { display: flex; align-items: center; gap: 6px; }
.rc-rsv-shead b { font-weight: 700; }
.rc-rsv-line { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.rc-rsv-none { margin: 8px 0; color: var(--dim); }

/* メモ帳（共通のメモ帳。sharedmemo-2026-10-09）：書く欄は窓いっぱい（字は入力の欄と同じ 12.5px）、下に保存の様子と最後に書いた人。保存の釦は無い */
.rc-body.rc-body-memo { display: flex; flex-direction: column; padding: 10px 12px; }
.rc-memo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.rc-memo-text {
  overflow-y: auto; scrollbar-gutter: stable;
  flex: 1 1 auto; min-height: 140px; width: 100%; box-sizing: border-box; resize: none; margin: 0; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px; line-height: 1.6;
}
.rc-memo-text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }
.rc-memo-text:disabled { background: var(--panel2); color: var(--faint); }
.rc-memo-foot { flex: none; display: flex; justify-content: space-between; gap: 8px; min-height: 16px; font-size: 11px; color: var(--faint); }
.rc-memo-state.rc-memo-bad { color: var(--vermil); }
.rc-memo-foot .rc-memo-who { flex: 1 1 auto; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-memo-btn {
  flex: none; height: 22px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--dim);
  font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap;
}
.rc-memo-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-edge); }
.rc-memo-btn:disabled { opacity: .5; cursor: default; }
.rc-memo-btn[hidden] { display: none; }
/* 履歴（同じ日「履歴も編集スタッフと共にたどれるように」）：一覧は 1 行に いつ〜いつ・書いた人・＋足した行 −消した行・書き換えた所の頭。
   1 つを開くと前の履歴との行ごとの違い（足した行は緑・消した行は赤の取り消し線・変わらない長い所はたたむ） */
.rc-memo-hist, .rc-memo-one { flex: 1 1 auto; min-height: 140px; display: flex; flex-direction: column; gap: 6px; }
.rc-memo-hist[hidden], .rc-memo-one[hidden], .rc-memo-text[hidden] { display: none; }
.rc-memo-histbar { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; }
.rc-memo-histbar b { font-size: 12px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-memo-histnote { flex: 1 1 auto; font-size: 11px; color: var(--faint); }
.rc-memo-onehead { flex: 1 1 auto; font-weight: 500; }
.rc-memo-histlist, .rc-memo-diff {
  flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
}
.rc-memo-histrow {
  display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "when who count" "head head head"; gap: 2px 8px; width: 100%;
  padding: 6px 10px; border: 0; border-bottom: 1px solid var(--line2); background: none; color: var(--text); font: inherit; font-size: 12px;
  text-align: left; cursor: pointer;
}
.rc-memo-histrow:hover { background: var(--panel2); }
.rc-mh-when { grid-area: when; font-variant-numeric: tabular-nums; color: var(--dim); white-space: nowrap; }
.rc-mh-who { grid-area: who; font-weight: 600; white-space: nowrap; }
.rc-mh-count { grid-area: count; justify-self: end; display: flex; gap: 6px; font-size: 11px; }
.rc-mh-count i { font-style: normal; color: var(--accent); }
.rc-mh-plus { font-style: normal; color: var(--jade); }
.rc-mh-minus { font-style: normal; color: var(--vermil); }
.rc-mh-head { grid-area: head; color: var(--faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-memo-histnone { margin: 0; padding: 10px; color: var(--faint); font-size: 12px; }
.rc-memo-histnone.rc-memo-bad { color: var(--vermil); }
.rc-memo-more { align-self: center; }
.rc-memo-diff { padding: 4px 0; font-size: 12px; line-height: 1.6; }
.rc-mh-line { padding: 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.rc-mh-add { background: var(--jade-wash, rgba(31, 107, 79, .1)); color: var(--jade); }
.rc-mh-del { background: var(--vermil-wash, rgba(168, 52, 31, .06)); color: var(--vermil); text-decoration: line-through; }
.rc-mh-same { color: var(--dim); }
.rc-mh-fold { padding: 0 10px; color: var(--faint); font-size: 11px; }

/* ── アラーム・タイマー（alarm-2026-10-15 利用者「便利ツールに アラーム を追加 時間と内容の簡素なアラーム タイマーも使えるように」） ──
   上に鳴っている帯（赤）、アラームの欄（時刻・内容・［追加］）と一覧、タイマーの欄（分・秒・内容・［スタート］・分の早押し）と一覧 */
.rc-body.rc-body-alarm { padding: 10px 12px; }
.rc-alarm { display: flex; flex-direction: column; gap: 10px; }
.rc-al-sec h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--dim); }
.rc-al-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rc-al-form input, .rc-al-edit input {
  height: 26px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--text);
  font: inherit; font-size: 12px; box-sizing: border-box;
}
.rc-al-form input:focus, .rc-al-edit input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }
/* 時刻の選び口（alarm2・alarm3・alarm4-2026-10-15 欄は 1 つ・押すと時と分の 2 列）：ほかの画面の検索付きプルダウン（.combo > .cbin）と同じ枠と ▾。
   値は隠した欄に持つ。.rc-al-form input より強くして ▾ の右の余白を残す */
.rc-alarm .rc-al-cbin {
  width: 5.8em; height: 26px; padding: 0 15px 0 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--text);
  font: inherit; font-size: 12px; box-sizing: border-box; cursor: pointer; font-variant-numeric: tabular-nums;
  background-image: linear-gradient(45deg, transparent 50%, var(--faint) 50%), linear-gradient(135deg, var(--faint) 50%, transparent 50%);
  background-position: right 8px center, right 4px center; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
.rc-al-cbin.rc-al-open { cursor: text; }
.rc-al-cbin::placeholder { color: var(--dim); opacity: 1; }
.rc-al-cbin:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }
/* 直している行（alarm2-2026-10-15）：欄が並び、右に［保存］［やめる］ */
.rc-al-item.rc-al-edit { flex-wrap: wrap; gap: 6px; }
.rc-al-edit .rc-al-etext { flex: 1 1 100px; min-width: 80px; }
.rc-al-ebtns { display: flex; gap: 4px; margin-left: auto; }
.rc-al-min, .rc-al-sec2 { width: 4.2em; }
.rc-al-text, .rc-al-ttext { flex: 1 1 110px; min-width: 90px; }
.rc-al-unit { color: var(--dim); }
.rc-al-go { color: var(--accent); border-color: var(--accent-edge); }
.rc-al-quick { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.rc-al-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rc-al-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel2); }
.rc-al-when { font-variant-numeric: tabular-nums; min-width: 4.2em; }
.rc-al-what { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-al-left { color: var(--dim); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rc-al-item.rc-al-on { border-color: var(--vermil); background: var(--vermil-wash, rgba(168, 52, 31, .1)); animation: rc-al-blink 1s steps(2, start) infinite; }
@keyframes rc-al-blink { to { background: var(--panel); } }
.rc-al-none { color: var(--faint); font-size: 11px; padding: 2px 0; }
.rc-al-ring {
  border: 2px solid var(--vermil); border-radius: 8px; padding: 8px 10px; background: var(--vermil-wash, rgba(168, 52, 31, .1));
  display: flex; flex-direction: column; gap: 6px;
}
.rc-al-ringrow { display: flex; align-items: center; gap: 10px; }
.rc-al-ringrow b { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--vermil); overflow-wrap: anywhere; }
.rc-al-ringrow span { color: var(--dim); font-variant-numeric: tabular-nums; }
.rc-al-stopbtn { height: 28px; padding: 0 14px; font-size: 12.5px; color: #fff; background: var(--vermil); border-color: var(--vermil); }
.rc-al-stopbtn:hover:not(:disabled) { color: #fff; border-color: var(--vermil); filter: brightness(1.1); }
.rc-al-note { font-size: 11px; color: var(--faint); }
/* 止めたまま未対応のアラーム（点滅しない赤い枠）・対応済みの数（alarmnotice-2026-10-24） */
.rc-al-item.rc-al-held { border-color: var(--vermil); }
.rc-al-item.rc-al-held .rc-al-left { color: var(--vermil); }
.rc-al-donenote { margin-top: 4px; font-size: 11px; color: var(--dim); }
.rc-al-donenote[hidden] { display: none; }
/* 見出しの「アラーム」（alarmnotice-2026-10-24）：札と窓は不在着信通知（missedcalls.css の mc-）と同じ部品。違う所だけ */
.al-chip.has-alarm .mc-count { color: #fff; background: var(--vermil, #d6336c); border-radius: 999px; padding: 0 7px; line-height: 17px; }
.al-card .mc-line b { min-width: 0; overflow-wrap: anywhere; }
.al-card .al-act { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 8px; min-height: 23px; }
.al-card .al-state { margin-right: auto; color: var(--dim); font-size: 11px; font-weight: 600; }
/* 作った人（alarmshare-2026-10-30。アラームは全員のもの） */
.al-card .al-by { margin-top: 2px; font-size: 11px; color: var(--dim); }
.rc-al-by { color: var(--dim); font-size: 11px; white-space: nowrap; }
.al-card.is-ring { background: var(--vermil-wash, rgba(168, 52, 31, .1)); }
.al-card.is-ring .al-state, .al-card.is-held .al-state { color: var(--vermil, #a8341f); }
.al-card .al-stop { color: #fff; background: var(--vermil, #a8341f); border-color: var(--vermil, #a8341f); }
/* 伝票のアラーム（slipalarm-2026-10-24）：見出しの窓・便利ツールの窓の伝票の行、伝票の窓の帯の［アラーム］と小窓 */
.al-card .al-slip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 4px; font-size: 11px; color: var(--dim); }
.al-card .al-slipnew, .rc-al-slipnew { color: var(--faint); }
.rc-al-item.rc-al-hasslip { flex-wrap: wrap; }
.rc-al-slipline { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 11px; color: var(--dim); }
.rc-al-slipline .rc-al-sliplink { border: 0; background: none; padding: 0; color: #1c64a0; text-decoration: underline; cursor: pointer; font: inherit; }
.btn.slal.slal-on { color: var(--accent); border-color: var(--accent-edge); }
.btn.slal.slal-ring { color: #fff; background: var(--vermil); border-color: var(--vermil); }
.modal.slalmodal { width: min(440px, calc(100vw - 32px)); }
.slalmodal .slal-note { margin-bottom: 10px; font-size: 11.5px; color: var(--dim); line-height: 1.6; }
.slalmodal .slal-form { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; }
.slalmodal .slal-row { display: contents; }
.slalmodal .slal-k { font-size: 12px; color: var(--dim); }
.slalmodal #slaltext { width: 100%; box-sizing: border-box; }
.slalmodal .slal-msg { min-height: 1.2em; margin-top: 8px; font-size: 12px; color: var(--vermil); }
.rc-al-note.rc-al-bad { color: var(--vermil); }
@media (prefers-reduced-motion: reduce) { .rc-al-item.rc-al-on { animation: none; } }
/* タイマーの内容は行の欄でそのまま直す（alarm3-2026-10-15 利用者「タイマーは編集ボタン不要」）。出勤登録の行と同じく、ふだんは字に点線の下線、
   触れるとうっすらした地、打つときは枠 */
.rc-al-item .rc-al-tname {
  flex: 1 1 auto; min-width: 0; height: 22px; margin: 0; padding: 1px 4px; box-sizing: border-box;
  border: 0; border-bottom: 1px dotted var(--faint); border-radius: 3px 3px 0 0; background: transparent;
  color: var(--text); font: inherit; font-size: 12px; cursor: text;
}
.rc-al-item .rc-al-tname:hover { background: var(--accent-wash); }
.rc-al-item .rc-al-tname:focus { outline: none; border-radius: 4px; background: var(--panel); box-shadow: 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-wash); }
.rc-al-item .rc-al-tname::placeholder { color: var(--faint); }
/* 時刻の 2 列（alarm4-2026-10-15 利用者「時と分は別々に変更するが　入力ボックスは一緒　１分単位」）：一覧はほかの画面と同じ .cbpop。中に「時」（00〜23）と
   「分」（00〜59）の列を並べ、列ごとに流す。選んでいる行は .on（強い地）、まだ選んでいない列は今の時刻の行に薄い枠（.rc-al-guess）。鍵で動かしている列は見出しが濃い */
.cbpop.rc-al-pop { overflow: visible; padding: 4px; }
.cbpop.rc-al-pop .rc-al-cols { display: flex; gap: 4px; }
.cbpop.rc-al-pop .rc-al-col { position: relative; width: 58px; max-height: min(232px, 46vh); overflow-y: auto; overscroll-behavior: contain; }
.cbpop.rc-al-pop .rc-al-colhead {
  position: sticky; top: 0; z-index: 1; padding: 2px 0 4px; background: var(--panel); color: var(--faint); font-size: 10.5px; text-align: center;
}
.cbpop.rc-al-pop .rc-al-colon .rc-al-colhead { color: var(--steel); font-weight: 600; }
.cbpop.rc-al-pop .cbrow { text-align: center; font-variant-numeric: tabular-nums; }
.cbpop.rc-al-pop .cbrow:hover:not(.on) { background: var(--accent-wash); }
.cbpop.rc-al-pop .cbrow.rc-al-guess { box-shadow: inset 0 0 0 1px var(--steel); color: var(--steel); }

/* ── 処理ログの窓（heavenshift-2026-10-19 #51 利用者「便利ツールに　https://app.mbupgroup.com/　同じ処理ログを追加」）──
   見た目は業務管理ツール（HLUT）の処理ログと同じ：絞り込みの釦（押されている間は緑の枠）・丸い種類の札（並び順 #fcefdf/#7a4b0f/#ecd5b0・
   出勤情報 #e3f4ea/#056d4d/#a8dfca・出勤の変更は HLUT のマインド＋反映の #e2eef8/#1f4d6e/#b9d4e9）・時刻は等幅の数字・灰色の行。
   反映待ちのカードは HLUT の反映待ちの箱の色（地 #fffaf0・札 #fff5df/#7a5600/#ead39a）。失敗の行は赤 */
.rc-body.rc-body-hlog { padding: 10px 12px; }
.rc-hlog {
  --hl-sort-bg: #fcefdf; --hl-sort-ink: #7a4b0f; --hl-sort-edge: #ecd5b0;
  --hl-att-bg: #e3f4ea; --hl-att-ink: #056d4d; --hl-att-edge: #a8dfca;
  --hl-shift-bg: #e2eef8; --hl-shift-ink: #1f4d6e; --hl-shift-edge: #b9d4e9;
  --hl-line-bg: #f5f8f7; --hl-wait-bg: #fffaf0; --hl-wtag-bg: #fff5df; --hl-wtag-ink: #7a5600; --hl-wtag-edge: #ead39a;
  --hl-on-edge: #07875f; --hl-on-bg: #eaf8f2; --hl-on-ink: #056d4d;
  display: flex; flex-direction: column; gap: 8px; font-size: 12px; min-height: 100%;
}
:root[data-theme="dark"] .rc-hlog {
  --hl-sort-bg: #3a2a14; --hl-sort-ink: #f2c98a; --hl-sort-edge: #6b4c22;
  --hl-att-bg: #123326; --hl-att-ink: #8fdcb8; --hl-att-edge: #2a6a50;
  --hl-shift-bg: #142a3d; --hl-shift-ink: #9cc8ea; --hl-shift-edge: #2c5576;
  --hl-line-bg: color-mix(in srgb, var(--text) 7%, transparent); --hl-wait-bg: color-mix(in srgb, #f2c98a 8%, transparent);
  --hl-wtag-bg: #3a2e12; --hl-wtag-ink: #f2d08a; --hl-wtag-edge: #6b5722;
  --hl-on-edge: #3fbf8f; --hl-on-bg: #123326; --hl-on-ink: #8fdcb8;
}
.rc-hlog-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-hlog-filters button {
  border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 10px; padding: 4px 10px;
  font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.rc-hlog-filters button[aria-pressed="true"] { border-color: var(--hl-on-edge); background: var(--hl-on-bg); color: var(--hl-on-ink); }
.rc-hlog-state { color: var(--dim); font-size: 11.5px; line-height: 1.6; }
.rc-hlog-top { display: grid; gap: 6px; }
.rc-hlog-card { background: var(--hl-wait-bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; display: grid; gap: 4px; }
.rc-hlog-cardhead {
  display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font: inherit; color: var(--text); text-align: left;
}
button.rc-hlog-cardhead { cursor: pointer; }
.rc-hlog-cardhead > span { font-weight: 800; }
.rc-hlog-cardhead > b { margin-left: auto; font-variant-numeric: tabular-nums; }
.rc-hlog-cardhead > em { font-style: normal; color: var(--vermil); font-weight: 700; }
.rc-hlog-wtag {
  font-style: normal; border: 1px solid var(--hl-wtag-edge); background: var(--hl-wtag-bg); color: var(--hl-wtag-ink);
  border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 800;
}
.rc-hlog-wgroup { display: grid; gap: 3px; padding-top: 4px; border-top: 1px solid var(--line2); }
.rc-hlog-list { display: grid; }
.rc-hlog-item { display: grid; gap: 4px; border-top: 1px solid var(--line); padding: 9px 0; }
.rc-hlog-head { display: flex; align-items: center; gap: 8px; }
.rc-hlog-head time { color: var(--dim); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rc-hlog-tag { border: 1px solid; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 900; white-space: nowrap; }
.rc-hlog-tag.rc-hlog-sort { background: var(--hl-sort-bg); color: var(--hl-sort-ink); border-color: var(--hl-sort-edge); }
.rc-hlog-tag.rc-hlog-attendance { background: var(--hl-att-bg); color: var(--hl-att-ink); border-color: var(--hl-att-edge); }
.rc-hlog-tag.rc-hlog-shift { background: var(--hl-shift-bg); color: var(--hl-shift-ink); border-color: var(--hl-shift-edge); }
.rc-hlog-res { margin-left: auto; color: var(--hl-att-ink); font-weight: 800; white-space: nowrap; }
.rc-hlog-failed .rc-hlog-res { color: var(--vermil); }
.rc-hlog-name { font-size: 13.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-hlog-name small { margin-left: 6px; color: var(--faint); font-size: 11px; font-weight: 600; }
.rc-hlog-line {
  display: flex; flex-wrap: wrap; gap: 2px 8px; background: var(--hl-line-bg); border-radius: 8px; padding: 4px 7px;
}
.rc-hlog-line b { font-weight: 800; font-variant-numeric: tabular-nums; }
.rc-hlog-line span { color: var(--dim); }
.rc-hlog-line em { font-style: normal; color: var(--vermil); }
.rc-hlog-line.rc-hlog-bad { box-shadow: inset 3px 0 0 var(--vermil); }
.rc-hlog-extra { color: var(--dim); font-size: 11px; padding-left: 7px; }
.rc-hlog-note { color: var(--vermil); font-size: 11.5px; padding-left: 7px; }
.rc-hlog-failed { box-shadow: inset 3px 0 0 var(--vermil); padding-left: 8px; }
.rc-hlog-none { margin: 0; padding: 8px 0; color: var(--faint); }
.rc-hlog-more { justify-self: center; align-self: center; }

/* ── 処理ログの窓の店ごとのスイッチ（heavenswitch-2026-10-19 #69）：店の名前・出勤／並び順の OFF｜ON（押されている方が色）・下見の箱・切り替えの札 ── */
.rc-hlog { --hl-sw-bg: #eef0f2; --hl-sw-ink: #3d4650; --hl-sw-edge: #cfd5db; }
:root[data-theme="dark"] .rc-hlog { --hl-sw-bg: #232a33; --hl-sw-ink: #c6cfd8; --hl-sw-edge: #3b4652; }
.rc-hlog-tag.rc-hlog-switch { background: var(--hl-sw-bg); color: var(--hl-sw-ink); border-color: var(--hl-sw-edge); }
.rc-hlog-sw { display: grid; gap: 6px; }
.rc-hlog-swrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rc-hlog-swrow > b { min-width: 6.5em; font-weight: 800; }
.rc-hlog-swpair { display: inline-flex; align-items: center; gap: 5px; }
.rc-hlog-swpair > i { font-style: normal; color: var(--dim); font-size: 11.5px; }
.rc-hlog-swtext { font-weight: 800; color: var(--faint); }
.rc-hlog-swtext.rc-on { color: var(--hl-on-ink); }
.rc-hlog-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.rc-hlog-seg button { border: 0; background: var(--panel); color: var(--dim); font: inherit; font-size: 11.5px; font-weight: 800; padding: 2px 10px; cursor: pointer; }
.rc-hlog-seg button + button { border-left: 1px solid var(--line); }
.rc-hlog-seg button[aria-pressed="true"] { background: var(--hl-on-bg); color: var(--hl-on-ink); }
.rc-hlog-seg button[data-swoff][aria-pressed="true"] { background: var(--hl-sw-bg); color: var(--hl-sw-ink); }
.rc-hlog-seg button:disabled { cursor: default; }
.rc-hlog-seg button:not(:disabled):hover { color: var(--text); }
.rc-hlog-prev { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; background: var(--hl-wait-bg); }
.rc-hlog-prev > p { margin: 0; line-height: 1.6; }
.rc-hlog-prev.rc-hlog-prevbad > p { color: var(--vermil); }
/* 行は前の灰色の行の大きさのまま（heavenswitch2：利用者「大きさは保って スイッチ」）。スイッチは字の高さに収まる丸い切り替え（つまみが右＝ON） */
.rc-hlog-sw.rc-hlog-state { display: block; }
.rc-hlog-sw .rc-hlog-swrow { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-hlog-swshop { color: var(--dim); }
.rc-hlog-swst { margin-left: 3px; }
.rc-hlog-swst.rc-on { color: var(--hl-on-ink); font-weight: 800; }
.rc-hlog-tg {
  position: relative; display: inline-block; vertical-align: -2px; width: 24px; height: 13px; margin: 0 0 0 4px; padding: 0;
  border: 1px solid var(--hl-sw-edge); border-radius: 999px; background: var(--hl-sw-bg); cursor: pointer;
}
.rc-hlog-tg > i { position: absolute; top: 1px; left: 1px; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); transition: left .15s; }
.rc-hlog-tg[aria-checked="true"] { background: var(--hl-on-bg); border-color: var(--hl-on-edge); }
.rc-hlog-tg[aria-checked="true"] > i { left: 12px; background: var(--hl-on-ink); }
.rc-hlog-tg:disabled { opacity: .45; cursor: default; }
.rc-hlog-tg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rc-hlog-linkbtn { justify-self: start; border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }

/* ── 処理ログの窓のメルトアップHP の行（meltuphp-2026-10-24 #143）：店ごとのスイッチの下に 1 行。名前を押すと業務管理ツールの箱と同じ中身 ── */
.rc-hlog-mhp { display: grid; gap: 6px; color: var(--dim); font-size: 11.5px; line-height: 1.6; }
.rc-hlog-mhprow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.rc-hlog-mhprow b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.rc-hlog-mhprow small { color: var(--faint); font-size: 11px; }
.rc-hlog-mhpname {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 900; color: var(--text); cursor: pointer; text-decoration: underline dotted;
}
.rc-hlog-mhpname[aria-expanded="true"] { color: var(--hl-on-ink); }
.rc-hlog-mhpst { font-weight: 800; color: var(--hl-on-ink); }
.rc-hlog-mhpst.rc-bad { color: var(--vermil); }
.rc-hlog-mhpst.rc-run { color: var(--hl-wtag-ink); }
.rc-hlog-mhpsw { white-space: nowrap; }
.rc-hlog-mhprun {
  border: 1px solid var(--hl-on-edge); background: var(--hl-on-bg); color: var(--hl-on-ink); border-radius: 8px; padding: 0 8px;
  font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer;
}
.rc-hlog-mhprun:disabled { opacity: .45; cursor: default; }
.rc-hlog-mhpbody > p small { margin-left: 4px; color: var(--faint); }
.rc-hlog-mhpnotes { display: flex; flex-wrap: wrap; gap: 4px; }
.rc-hlog-mhpdid { flex-basis: 100%; color: var(--dim); }
.rc-hlog-mhpruns { display: flex; flex-wrap: wrap; gap: 4px; }
.rc-hlog-mhpbtn { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 8px; padding: 1px 8px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.rc-hlog-mhpbtn[aria-pressed="true"] { border-color: var(--hl-on-edge); background: var(--hl-on-bg); color: var(--hl-on-ink); }
.rc-hlog-mhpbtn.rc-bad { color: var(--vermil); }

/* 通常の別ウィンドウ。タイトルと閉じる操作はブラウザーの枠を使い、道具の中身を窓いっぱいにする。 */
body.rc-tool-window {
  --rc-on-accent: var(--panel);
  --rc-shadow: var(--shadow-sign, rgba(16, 24, 40, .16));
  margin: 0; display: block; overflow: hidden; background: var(--panel); color: var(--text);
  font-family: var(--sans); font-size: 12px; line-height: 1.5;
}
body.rc-tool-window > .rc-body { height: 100vh; box-sizing: border-box; overflow: auto; }
body.rc-tool-window :where(button) { font: inherit; }
body.rc-tool-window .phonebox {
  position: static; width: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none;
}
body.rc-tool-window .pb-calls { max-height: none; }