/* AISOS Studio — 明るい中間色の面に、意味を持つ色だけを置く（D-135 で配色を作り直した）。
   値の出どころはここ1か所。test/studio-spec.test.ts が「ここに無い色を足さない」「文字は 4.5:1 以上」を機械で固定する。 */
/* ==== tokens ==== */
:root {
  /* 2.1 面と文字。画用紙のようなクリーム色（D-154）。ink 18:1 / muted 7.2:1 / faint 3.2:1（faint は飾りと補助にだけ使う。本文には使わない） */
  --canvas: #FAF6EE;
  --surface: #FFFDF8;
  --surface-2: #F1EBDF;
  --ink: #16161A;
  --ink-muted: #52525B;
  --ink-faint: #8A8A93;
  --border: #E7E0D2;
  --border-strong: #CDC5B4;
  --border-control: #96907F;
  --row-hover: #F5EFE1;
  --selected: #EEF2FF;
  --overlay: rgba(24, 24, 27, 0.45);
  --scrim: rgba(250, 246, 238, 0.78);
  /* 2.2 操作。アクセントは1色（青藍）。主ボタン・リンク・選択中のタブ・フォーカス・選択行に限って使う。白文字で 5.5:1 */
  --action: #2F5BEA;
  --action-hover: #2447C4;
  --action-text: #FFFFFF;
  --action-tint: #EEF2FF;
  --focus: #2F5BEA;
  /* 2.3 状態（文字 / 背景 / 罫線）。色相と明るさの両方で分け、必ずアイコンか文字を添える（色だけで伝えない） */
  --ok-text: #1F7A4D;
  --ok-bg: #E6F4EC;
  --ok-line: #B7DEC6;
  --warn-text: #9A5B00;
  --warn-bg: #FFF4E0;
  --warn-line: #F0D39A;
  --danger-text: #B42318;
  --danger-bg: #FDE8E6;
  --danger-line: #F3C0BB;
  --info-text: #1D4ED8;
  --info-bg: #E8EFFF;
  --info-line: #C4D3FB;
  /* 2.4 勤務区分（シフト表示のみ）。Okabe–Ito 系の6色相。記号の文字（早/日/遅/夜/明/公）を必ず添える。
     夜（紫 L=.098）と遅（茶 L=.066）は明るさでも離してある（2型色覚で紫と茶が近づくため） */
  --shift-day-text: #1D4ED8;
  --shift-day-bg: #E8EFFF;
  --shift-night-text: #6D28D9;
  --shift-night-bg: #F1EBFA;
  --shift-after-text: #B45309;
  --shift-after-bg: #FFF1E0;
  --shift-early-text: #0F766E;
  --shift-early-bg: #E0F2F1;
  --shift-late-text: #78350F;
  --shift-late-bg: #FEF3C7;
  --shift-off-text: #52525B;
  --shift-off-bg: #EFEFED;
  /* 3.6 バッジ・3.12 サイドバー選択中 */
  --neutral-bg: #EFEFED;
  /* 2.4b アバター（頭文字の背景。白文字で 4.5:1 以上。名前から決定的に選ぶ） */
  --avatar-1: #4F6D8A;
  --avatar-2: #5B7A5E;
  --avatar-3: #8A5B6E;
  --avatar-4: #7A6A4F;
  --avatar-5: #5E5B8A;
  --avatar-6: #4F7A7A;
  /* 2.5 タイポグラフィ。Inter + Noto Sans JP（Google Fonts・swap）。届かなければ OS の字体 */
  --font: Inter, "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Segoe UI", sans-serif;
  /* 2.7 形と影 */
  --radius: 6px;
  --radius-sm: 4px;
  --shadow-popover: 0 2px 8px rgba(24, 24, 27, .10);
  --shadow-modal: 0 12px 32px rgba(24, 24, 27, .18);
  /* 2.8 高さ。2026-08-26: 押せるものは 40px 以上（スマホは 44px）にする（AGENTS §2.7-5）。
     sm は表の行（40px）の中に収まる大きさ。 */
  --h-sm: 32px;
  --h-md: 40px;
  --h-lg: 44px;
  --row-h: 40px;
  --th-h: 36px;
  --side-item-h: 36px;
  --sidebar-w: 220px;
}

/* ==== base ==== */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 文字の大きさ「大」。目盛り（20/16/14/13/12/11/24）は px で決めているので、font-size を触らず
   body ごと 1.15 倍に拡大する（zoom は Chrome / Safari / Edge、Firefox 126 以降で効く）。 */
html[data-font="large"] body { zoom: 1.15; }
[hidden] { display: none !important; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  background: var(--canvas);
  color: var(--ink);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; font-variant-numeric: tabular-nums; }
b, strong { font-weight: 700; }
em, i { font-style: normal; }
a { color: inherit; }
/* 2.9 フォーカス。すべての操作要素に同じ輪郭を出す */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 文字の型（2.5, D-135 / 2026-08-26 に本文と補助を読みやすい側へ寄せた）。
   画面見出し 24/1.3 / セクション見出し 16/1.5 / 小見出し 14/1.6/700 / 本文 14/1.6 / テーブル 14/1.5 /
   ラベル 13/1.6/500 / 補助 13/1.6 / 単位と札 11〜12 / 数値強調 24/1.2（型E のタイルは PC で 28）。
   見出しだけ日本語の詰め（palt）を効かせる。本文・表・数字には効かせない（桁が揃わなくなる） */
h1, .h1 { font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; font-feature-settings: "palt"; }
h2, .h2 { font-size: 16px; line-height: 1.5; font-weight: 700; font-feature-settings: "palt"; }
h3 { font-size: 16px; line-height: 1.5; font-weight: 700; font-feature-settings: "palt"; }
.en { display: block; font-size: 13px; line-height: 1.6; font-weight: 700; color: var(--ink); }
.label { display: block; font-size: 13px; line-height: 1.6; font-weight: 500; color: var(--ink); }
.muted { font-size: 13px; line-height: 1.6; color: var(--ink-muted); }
.small { font-size: 13px; line-height: 1.6; }
/* 長い説明は 40〜50 字で折る（2.7-2）。画面幅いっぱいに伸ばさない */
.measure { max-width: 640px; }
p.muted, p.small, p.measure { max-width: 640px; }
.num-big { font-size: 24px; line-height: 1.2; font-weight: 700; }
.unit { font-size: 12px; font-weight: 400; color: var(--ink-muted); margin-left: 2px; }
.divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* ==== components ==== */

/* --- 3.1 Button --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-md); padding: 0 12px;
  font-size: 14px; font-weight: 500; line-height: 1;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  position: relative;
}
/* 動き（D-135）。色は 120ms、押した瞬間だけ 2% 縮む。prefers-reduced-motion では止める（末尾の @media） */
.btn, .tab, .mod, .cellbtn, .calday, .tile.btn {
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .08s ease;
}
.btn:active:not(:disabled), .mod:active, .cellbtn:active { transform: scale(.98); }
.btn:hover { background: var(--row-hover); }
.btn-primary { background: var(--action); color: var(--action-text); border-color: var(--action); }
.btn-primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-ghost { background: transparent; color: var(--ink-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--row-hover); color: var(--ink); }
.btn-danger { background: var(--danger-text); color: var(--action-text); border-color: var(--danger-text); }
.btn-danger:hover { background: var(--danger-text); border-color: var(--danger-text); }
.btn-sm { height: var(--h-sm); padding: 0 12px; font-size: 13px; }
.btn-lg { height: var(--h-lg); padding: 0 20px; font-size: 14px; }
.btn .icon { width: 14px; height: 14px; }
.btn-primary .icon, .btn-danger .icon { color: inherit; }
.btn:disabled { cursor: default; color: var(--ink-faint); }
.btn-primary:disabled { background: var(--ink-faint); border-color: var(--ink-faint); color: var(--action-text); }
.btn.w-full { width: 100%; }
/* 処理中はラベルを消さず、左にスピナー */
.btn.busy { pointer-events: none; }
.btn.busy::before {
  content: ""; width: 12px; height: 12px; flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn[aria-pressed="true"] { background: var(--neutral-bg); border-color: var(--border-strong); }
.btn.picked { background: var(--action); color: var(--action-text); border-color: var(--action); }

/* --- 3.1b その他のメニュー。月に1回しか使わない操作は、帯に並べずここへしまう（主行動を1つにする） --- */
.menu { position: relative; display: inline-flex; }
.menu > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 9; min-width: 240px;
  display: flex; flex-direction: column; gap: 2px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-popover);
}
.menu-list .btn { width: 100%; justify-content: flex-start; background: transparent; border-color: transparent; }
.menu-list .btn:hover { background: var(--row-hover); }

/* --- 3.2 Input / Textarea / Select --- */
.input, .select, .textarea {
  display: block; width: 100%; height: var(--h-md); padding: 0 12px;
  font-size: 14px; line-height: 1.5;
  border: 1px solid var(--border-control); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.textarea { height: auto; min-height: 68px; padding: 8px 12px; resize: vertical; }
.select { padding-right: 24px; appearance: auto; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--action); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--canvas); color: var(--ink-muted); }
.input-sm, .select-sm { height: var(--h-sm); font-size: 13px; padding: 0 8px; line-height: 1.4; }
.select-sm { padding-right: 24px; }
.input-lg, .select-lg { height: var(--h-lg); }
.input.w-auto, .select.w-auto { width: auto; }
.input-num { text-align: right; }
.input.is-error, .select.is-error, .textarea.is-error { border-color: var(--danger-text); }
.field { display: block; margin-bottom: 16px; }
.field > .label { margin-bottom: 4px; display: flex; align-items: center; gap: 6px; min-height: 16px; }
.field .req { font-size: 11px; line-height: 1; font-weight: 500; color: var(--ink-muted); padding: 3px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.field-hint { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--ink-muted); max-width: 640px; }
.field-error { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--danger-text); }
.form-error {
  font-size: 13px; line-height: 1.5; color: var(--danger-text);
  border: 1px solid var(--danger-line); background: var(--danger-bg); border-radius: var(--radius);
  padding: 8px 12px; margin-bottom: 16px;
}
.form { max-width: 640px; }
.form-section { padding: 16px 0; border-top: 1px solid var(--border); }
.form-section:first-of-type { border-top: none; padding-top: 0; }

/* --- 3.3 Checkbox / Radio --- */
.checkbox, .radio {
  width: 16px; height: 16px; margin: 0; flex-shrink: 0; cursor: pointer;
  accent-color: var(--action); border-radius: var(--radius-sm);
}
.check {
  /* flex-shrink 既定値(1)のままだと狭い親の中で潰れ、日本語が一文字ずつ折り返す。 */
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--h-sm);
  font-size: 14px; cursor: pointer;
}
.check > span { white-space: nowrap; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 12px; }
.checks.column { flex-direction: column; align-items: stretch; }

/* --- 3.4 Switch（即時反映の設定だけ） --- */
.switch {
  width: 36px; height: 20px; padding: 0; flex-shrink: 0; position: relative; cursor: pointer;
  border: 1px solid var(--border-control); border-radius: var(--radius); background: var(--surface);
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: var(--radius-sm); background: var(--border-strong);
}
.switch[aria-checked="true"] { background: var(--action); border-color: var(--action); }
.switch[aria-checked="true"]::after { left: 18px; background: var(--action-text); }
.switch:disabled { cursor: not-allowed; border-style: dashed; }

/* --- 3.5 Table --- */
.table-wrap { overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.table-wrap.flush { border: none; border-radius: 0; border-top: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; }
th {
  position: sticky; top: 0; z-index: 1;
  height: var(--th-h); padding: 0 12px; text-align: left; vertical-align: middle;
  font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink-muted);
  background: var(--canvas); border-bottom: 1px solid var(--border);
}
td {
  height: var(--row-h); padding: 0 12px; vertical-align: middle;
  font-size: 14px; line-height: 1.5; border-bottom: 1px solid var(--border);
}
tbody tr:last-child td { border-bottom: none; }
.table-wrap.flush tbody tr:last-child td { border-bottom: 1px solid var(--border); }
tbody tr:hover { background: var(--row-hover); }
tbody tr.sel { background: var(--selected); }
tbody tr.pick { cursor: pointer; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num .unit { color: var(--ink-muted); }
td.muted { color: var(--ink-muted); }
td .input-sm, td .select-sm { min-width: 96px; }
td.actions { white-space: nowrap; text-align: right; }
td.actions .btn + .btn { margin-left: 8px; }
td.wrap { white-space: normal; height: auto; padding: 8px 12px; }
.table-note { padding: 8px 12px; font-size: 13px; line-height: 1.6; color: var(--ink-muted); }

/* --- 3.6 Badge --- */
.badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
  font-size: 11px; line-height: 1; font-weight: 500; white-space: nowrap;
  border-radius: var(--radius-sm); background: var(--neutral-bg); color: var(--ink-muted);
}
.badge-ok { background: var(--ok-bg); color: var(--ok-text); }
.badge-warn { background: var(--warn-bg); color: var(--warn-text); }
.badge-danger { background: var(--danger-bg); color: var(--danger-text); }
.badge-info { background: var(--info-bg); color: var(--info-text); }
.badge-day { background: var(--shift-day-bg); color: var(--shift-day-text); }
.badge-night { background: var(--shift-night-bg); color: var(--shift-night-text); }
.badge-night_after { background: var(--shift-after-bg); color: var(--shift-after-text); }
.badge-early { background: var(--shift-early-bg); color: var(--shift-early-text); }
.badge-late { background: var(--shift-late-bg); color: var(--shift-late-text); }
.badge-off { background: var(--shift-off-bg); color: var(--shift-off-text); }

/* --- 3.7 Banner（上部の帯。右端に必ず解消の導線） --- */
.banner {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  font-size: 13px; line-height: 1.5; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--neutral-bg); color: var(--ink);
}
.banner > span { flex: 1; min-width: 0; }
.banner .btn { flex-shrink: 0; }
.banner-info { background: var(--info-bg); border-color: var(--info-line); color: var(--info-text); }
.banner-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-text); }
.banner-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-text); }
.banner-danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger-text); }
.banner .btn-ghost { color: inherit; }
.banner > .icon { flex-shrink: 0; }
/* 画面の上の帯（失敗はここに残す。トーストで消さない） */
.alerts { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; padding: 8px 24px 0; }
.alerts:empty { display: none; }

/* --- 3.8 SaveBar（未保存がある間だけ、画面下部に固定） --- */
.savebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
  display: flex; align-items: center; gap: 12px; padding: 0 24px; height: 48px;
  background: var(--surface); border-top: 1px solid var(--border-strong);
}
.savebar .savebar-count { flex: 1; font-size: 14px; }
.savebar[hidden] { display: none; }
.has-savebar { padding-bottom: 48px; }

/* --- 3.9 Modal --- */
dialog {
  /* `* { margin: 0 }` のリセットが UA既定の margin:auto を消すと左上に貼り付く。ここで戻す */
  margin: auto;
  width: min(480px, 92vw);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px;
  background: var(--surface); color: var(--ink);
  max-height: calc(100dvh - 48px); overflow-y: auto;
  box-shadow: var(--shadow-modal);
}
dialog.modal-md { width: min(640px, 92vw); }
dialog.modal-lg { width: min(880px, 92vw); }
dialog::backdrop { background: var(--overlay); }
dialog h3 { margin-bottom: 8px; }
dialog h3 + p { margin-bottom: 12px; }
/* チェックボックスとラジオを除く。除かないと width:100% がチェックボックスにも当たる */
dialog input:not([type="checkbox"]):not([type="radio"]), dialog textarea, dialog select { width: 100%; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* --- 3.10 Toast（右下・3秒・成功だけ） --- */
.toast {
  position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 10;
  display: flex; align-items: center; gap: 12px; max-width: min(92vw, 480px);
  padding: 12px 16px; font-size: 13px; line-height: 1.5;
  background: var(--ink); color: var(--action-text); border-radius: var(--radius);
  box-shadow: var(--shadow-popover);
}
.toast[hidden] { display: none; }
.toast .toast-close { color: var(--action-text); }
.toast .toast-undo { color: var(--action-text); border-color: var(--action-text); }
.has-savebar .toast { bottom: calc(48px + 16px + env(safe-area-inset-bottom)); }

/* --- 3.11 Tabs（下線タブ） --- */
.tabs, .subtabs, .tabs-under { display: flex; gap: 0; }
.tab {
  height: var(--h-lg); padding: 0 12px; border: none; border-bottom: 2px solid transparent;
  background: transparent; font-size: 14px; font-weight: 500; color: var(--ink-muted); cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.bar #font-scale { align-self: center; }
.tab.on { color: var(--ink); border-bottom-color: var(--action); }
.tab.off { display: none; }
.tabs-under { border-bottom: 1px solid var(--border); flex-shrink: 0; }
.tabs-under .tab { height: var(--h-md); font-size: 14px; }

/* --- 3.12 Sidebar --- */
.rail {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border);
  padding: 12px 8px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
}
.rail-head { padding: 4px 8px 8px; }
.rail-foot { margin-top: auto; padding: 12px 8px 0; font-size: 13px; color: var(--ink-muted); line-height: 1.6; }
/* 設定を言葉で探す。結果はサイドバーの中に、押せる形で並べる（見た目の続きは .mod の後ろ） */
.settings-find { display: flex; flex-direction: column; gap: 4px; }
.settings-find .label { font-size: 12px; line-height: 1.4; color: var(--ink-muted); }
.find-hits { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.find-hits .find-none { padding: 6px 8px; font-size: 13px; line-height: 1.6; color: var(--ink-muted); }
.modules { display: flex; flex-direction: column; gap: 2px; }
.side-group { display: flex; flex-direction: column; gap: 2px; }
.side-group + .side-group { margin-top: 12px; }
.side-group-title { padding: 0 8px 4px; font-size: 11px; line-height: 1.4; font-weight: 500; color: var(--ink-faint); }
.mod {
  display: flex; align-items: center; gap: 8px; height: var(--side-item-h); padding: 0 8px; border: none;
  border-radius: var(--radius); background: transparent; font-size: 13px; color: var(--ink);
  cursor: pointer; text-align: left; width: 100%; white-space: nowrap;
}
.mod:hover { background: var(--row-hover); }
.mod.on { background: var(--neutral-bg); color: var(--ink); font-weight: 500; }
.mod.on .icon { color: var(--action); }
.mod[hidden] { display: none; }
.mod .count { margin-left: auto; font-size: 13px; color: var(--ink-muted); }
/* 上のタブに出す未読。中身が無いときは四角を出さない */
.tab .count { margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--danger-text); }
.tab .count:empty { display: none; }
.mod .icon { color: var(--ink-muted); }
.mod.on .icon, .mod:hover .icon { color: var(--ink); }
/* 探した結果。サイドバーの項目（.mod）と同じ見た目のまま、2行ぶんの高さで折り返す。
   .mod の後ろに書く（前に書くと nowrap と固定の高さに負けて、文字がはみ出す） */
.find-hit {
  flex-direction: column; align-items: flex-start; gap: 2px;
  height: auto; padding: 6px 8px; white-space: normal; overflow-wrap: anywhere;
}
.find-hit b { font-size: 13px; font-weight: 500; color: var(--ink); }
.find-hit span { font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
.tab .icon { color: inherit; margin-right: 6px; vertical-align: -3px; }

/* --- 3.13 PageHeader --- */
.page-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.page-header > div:first-child { flex: 1; min-width: 0; }
.page-header h1 + p { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--ink-muted); max-width: 640px; }
.page-header .page-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.page-header .select { width: auto; min-width: 160px; }

/* --- 3.14 EmptyState --- */
.empty-state { padding: 32px 24px; text-align: center; max-width: 480px; margin: 0 auto; }
.empty-state h2 { margin-bottom: 4px; }
.empty-state p { font-size: 14px; line-height: 1.6; color: var(--ink-muted); }
.empty-state .btn { margin-top: 16px; }

/* --- 4つの状態（空・読み込み中・失敗・権限なし）。paneState() が描く。
   見出し 16/700・本文 1行 14・ボタン 1〜2 個。幅 420 で面の中央。挿絵は置かない（D-135） --- */
.state { padding: 32px 24px; max-width: 420px; margin: 0 auto; text-align: center; width: 100%; }
.state > .icon { width: 20px; height: 20px; color: var(--ink-muted); margin: 0 auto 8px; display: block; }
.state-title { font-size: 16px; font-weight: 700; line-height: 1.5; margin-bottom: 4px; }
.state p { font-size: 14px; color: var(--ink-muted); line-height: 1.6; }
.state .state-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; justify-content: center; }
.state.error, .state.forbidden, .state.done { margin: 16px auto; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.state.error > .icon { color: var(--danger-text); }
.state.forbidden > .icon { color: var(--warn-text); }
.state.done > .icon { color: var(--ok-text); }
/* 読み込み中は文字ではなく骨組み（skeleton）を出す。棒 3〜6 本。光は面の色の帯を横に流す（グラデーション禁止のため transform） */
.state.loading { text-align: left; max-width: none; padding: 16px 0; }
.skeleton {
  position: relative; overflow: hidden; height: 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); margin-bottom: 12px;
}
.skeleton::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: var(--border); animation: shimmer 1.2s ease-in-out infinite;
}
.skeleton.w-40 { width: 40%; } .skeleton.w-60 { width: 60%; } .skeleton.w-80 { width: 80%; } .skeleton.w-100 { width: 100%; }
.skeleton.row { height: var(--row-h); border-radius: 0; margin: 0; border-bottom: 1px solid var(--border); background: var(--surface); }
.skeleton.row::after { top: 14px; bottom: 14px; left: 12px; width: 30%; border-radius: var(--radius-sm); background: var(--surface-2); animation: shimmer-row 1.2s ease-in-out infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes shimmer-row { 0%, 100% { background-color: var(--surface-2); } 50% { background-color: var(--border); } }
.state.error { border-color: var(--danger-line); background: var(--danger-bg); }
.state.error .state-title, .state.error p { color: var(--danger-text); }
.state.forbidden { border-color: var(--warn-line); background: var(--warn-bg); }
.state.forbidden .state-title, .state.forbidden p { color: var(--warn-text); }
.state.done { border-color: var(--ok-line); background: var(--ok-bg); }
.state.done .state-title, .state.done p { color: var(--ok-text); }
.card > .state, .side .state, .punch-status .state { margin: 0 auto; }
.state .state-ref { user-select: all; }

/* --- 余白と並びの道具（2.6 の目盛りだけ） --- */
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-end { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.w-full { width: 100%; }
.w-64 { width: 64px; }
.w-120 { width: 120px; }
.w-160 { width: 160px; }
.w-200 { width: 200px; }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.pad { padding: 20px 24px; }
.pad-x { padding: 0 20px; }
.section { margin-top: 24px; }
.section > .h2 { margin-bottom: 8px; }
.section-desc { font-size: 14px; line-height: 1.6; color: var(--ink-muted); margin-bottom: 8px; max-width: 640px; }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; line-height: 1.5; margin-top: 8px; }
.kv > span:first-child { color: var(--ink-muted); font-size: 13px; line-height: 1.6; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.card + .card { margin-top: 12px; }
.card.surface-2 { background: var(--surface-2); }
/* 型E「今日」の数字タイル。押せるカード（.btn の見た目を card に寄せる）。0 は薄く */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile.btn {
  height: auto; min-height: 96px; padding: 16px; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: 4px; text-align: left; white-space: normal; font-weight: 400;
}
.tile .num { font-size: 28px; line-height: 1.2; font-weight: 700; }
.tile .num span { font-size: 12px; color: var(--ink-muted); font-weight: 400; }
.tile.is-zero .num { color: var(--ink-faint); }
/* 押せるタイルは右下の矢印で分かる（見た目だけで「押せる」と予測できる） */
.tile .tile-go { position: absolute; right: 12px; bottom: 12px; color: var(--ink-faint); }
/* 数字ではなく言葉で言うタイル（「済み」）と、注意のアイコンを添えるタイル（「先月が未締め」） */
.tile .tile-text { font-size: 14px; line-height: 1.5; }
.tile.is-warn { border-color: var(--warn-line); }
.tile.is-warn .tile-warn { color: var(--warn-text); }
.tile.is-warn .tile-text { color: var(--warn-text); }
.tile.btn:hover { border-color: var(--border-strong); }
.tile.btn:hover .tile-go { color: var(--action); }
.today-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.today-mine .kv { display: flex; justify-content: flex-start; align-items: center; gap: 12px; min-height: var(--h-md); margin-top: 0; border-bottom: 1px solid var(--border); }
.today-mine .kv:last-child { border-bottom: none; }
.today-mine .kv > span:first-child { width: 120px; flex-shrink: 0; font-size: 13px; color: var(--ink-muted); }
.today-mine .kv > .btn-primary { margin-left: auto; }
.card.dark { background: var(--ink); border-color: var(--ink); color: var(--action-text); }
.card.dark .en, .card.dark .muted, .card.dark .kv > span:first-child { color: var(--ink-faint); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cards + .card, .cards2 + .card, .card + .cards { margin-top: 12px; }
.card .num { font-size: 24px; line-height: 1.2; font-weight: 700; margin-top: 4px; }
/* 表の右寄せの列は数字の強調ではない。箱の中に表を置いたときに 24px にならないようにする */
.card table .num, .card table th.num { font-size: 13px; line-height: 1.5; font-weight: 400; margin-top: 0; }
.card .num span { font-size: 12px; color: var(--ink-muted); font-weight: 400; }
.card.dark .num span { color: var(--ink-faint); }
.link { color: var(--action); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link:hover { color: var(--action-hover); }

/* ==== shell ==== */
.bar {
  height: 48px; flex-shrink: 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: stretch; gap: 20px; padding: 0 24px;
}
.brand { display: flex; align-items: center; gap: 8px; align-self: center; line-height: 1.4; }
.brand-mark { width: 24px; height: 24px; flex-shrink: 0; color: var(--ink); display: inline-flex; }
.brand-mark svg { width: 24px; height: 24px; }
.brand-name { font-weight: 700; font-size: 16px; line-height: 1.3; font-feature-settings: "palt"; }
.brand-sub { font-size: 11px; line-height: 1; color: var(--ink-faint); font-weight: 500; letter-spacing: 0.04em; align-self: flex-end; padding-bottom: 3px; }
.bar .tabs { align-self: stretch; flex: 1; min-width: 0; }
.bar .tab { height: 48px; }
.bar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.who { font-size: 14px; color: var(--ink-muted); }
/* 読み上げにだけ伝える文字（骨組みの「読み込んでいます」など） */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* 確定の前に見るべきことを、ボタンの下で言う */
.shift-confirm-note { flex-basis: 100%; font-size: 13px; line-height: 1.6; color: var(--warn-text); }
.shift-confirm-note[hidden] { display: none; }
.shift-confirm-note .banner { margin-top: 4px; }
/* アイコン（icons.js）。16px の線画・線 1.5・currentColor */
.icon { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: -3px; }
.icon-btn { width: var(--h-md); padding: 0; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--action-text);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; flex-shrink: 0;
  letter-spacing: 0.02em; user-select: none;
}
.avatar.tone-1 { background: var(--avatar-1); } .avatar.tone-2 { background: var(--avatar-2); } .avatar.tone-3 { background: var(--avatar-3); }
.avatar.tone-4 { background: var(--avatar-4); } .avatar.tone-5 { background: var(--avatar-5); } .avatar.tone-6 { background: var(--avatar-6); }
.subtabs {
  flex-shrink: 0; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.subtabs .tab { height: var(--h-md); font-size: 14px; }
.subtabs[hidden] { display: none; }

#main { flex: 1; min-height: 0; position: relative; }
.view { display: none; height: 100%; }
.view.on { display: flex; }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.side {
  width: 300px; flex-shrink: 0; background: var(--surface); border-left: 1px solid var(--border);
  padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto;
  position: relative;
}
/* 右の欄は畳める。表を広く見たいときに邪魔になる（2026-08-26 の差し戻し）。
   閉じても「開く」の取っ手は必ず残す（閉じたら二度と開けない、を作らない）。開閉は端末に覚える */
.side.closed { width: 40px; padding: 16px 0; overflow: hidden; align-items: center; }
.side.closed > *:not(.side-handle) { display: none; }
.side-handle {
  position: absolute; top: 12px; right: 12px; width: 32px; min-height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.side.closed .side-handle { position: static; }
.side.closed + .side-handle { display: none; }
.side .en + .kv { margin-top: 4px; }
.pane { flex: 1; padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.pane > .table-wrap { flex-shrink: 0; }
.pane-head { display: flex; align-items: flex-start; gap: 16px; }
.pane-head > :last-child { margin-left: auto; flex-shrink: 0; }

/* 画面の名前と、その画面が何をするかの1文（2.6-4 / 2.7-3）。操作の帯の上、画用紙の面の上に置く */
.screen-head { flex-shrink: 0; padding: 16px 24px 12px; }
.screen-head > p { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--ink-muted); max-width: 640px; }

/* 画面ごとの操作の帯（月の切り替え・状態・主行動） */
.shift-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 20px;
  border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; flex-wrap: wrap;
}
.shift-bar b { font-size: 14px; min-width: 96px; text-align: center; }
.shift-bar .select { width: auto; min-width: 120px; }
.shift-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
/* PC では主行動・副行動を 40 の高さ・左右 16 で少し大きく（下の @media で md に戻す） */
.shift-actions .btn-primary, .shift-actions .btn-secondary { height: 40px; padding: 0 16px; }
.shift-wrap { position: relative; }
/* まだ自動作成していない月: 表の上に状態を重ねる */
.shift-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--scrim); z-index: 5; }
.shift-overlay .state { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.col-head { display: flex; align-items: center; gap: 12px; padding: 8px 20px; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--border); }
.col-head .select { width: auto; }
.crumb { font-size: 14px; color: var(--ink-muted); flex: 1; }
.crumb b { color: var(--ink); }
.shift-wrap { flex: 1; overflow: auto; background: var(--surface); }
/* 表そのものを出す箱（シフトの格子・打刻の一覧）は端まで使う。
   それ以外（文章と表が混じる面）は左右に余白を取り、横に伸びすぎないよう幅を止める。
   止めないと、広い画面で1行が長くなり、左端に張り付いて読みにくい（2026-08-26 の差し戻し） */
.shift-wrap.padded { padding: 20px 24px; }
.shift-wrap.padded > * { max-width: 1120px; }
.shift-legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 8px 20px; border-top: 1px solid var(--border);
  background: var(--surface); font-size: 12px; color: var(--ink-muted); flex-shrink: 0;
}
.shift-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend-box {
  display: inline-flex; align-items: center; justify-content: center; height: 20px; min-width: 20px; padding: 0 4px;
  font-size: 11px; font-weight: 500; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
}
.legend-box.support { border-style: dashed; }
.vio-item { border-left: 2px solid var(--border-strong); padding: 8px 12px; margin-top: 8px; font-size: 13px; line-height: 1.6; background: var(--canvas); }
.vio-item .row-end { margin-top: 4px; }
.vio-item b { display: block; font-size: 13px; color: var(--ink-muted); }
.vio-item span { display: block; }

/* 現場の主行動（打刻・スマホだけ）。型D: 1画面1動作、lg、横幅いっぱい */
.primary-action {
  display: none;
  position: fixed; left: 16px; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom));
  height: var(--h-lg); border: 1px solid var(--action); border-radius: var(--radius);
  background: var(--action); color: var(--action-text); font-size: 14px; font-weight: 500;
  cursor: pointer; z-index: 9;
}
.primary-action:disabled { background: var(--ink-faint); border-color: var(--ink-faint); }
.punch-status { margin: 12px 20px 0; }
.side-toggle { display: none; }

/* ==== ログイン・初期設定 ==== */
.login {
  position: fixed; inset: 0; background: var(--canvas); z-index: 20;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.login[hidden] { display: none; }
.login-box {
  width: min(400px, 100%); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
}
.login-box .brand { margin-bottom: 16px; }
.login-box .login-title { margin-bottom: 4px; }
.login-box .btn + .btn { margin-top: 8px; }
.input-code { font-size: 24px; letter-spacing: 6px; text-align: center; height: var(--h-lg); }
/* 企業IDのリンクから来たときだけ出す、どの法人に入るのかの札（D-167） */
.login-company {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px;
}
.login-company[hidden] { display: none; }
.login-company strong { font-size: 16px; font-weight: 700; line-height: 1.6; }
.login-company .muted { font-size: 12px; }
/* 埋まっていて直せない欄。灰色で「もう入っている」と読めるようにする */
.input.is-locked { background: var(--surface-2); color: var(--ink-muted); }
/* 配るリンクの一覧（設定 › 配るリンク）。リンクとQRを1枚の札にする */
.entry-cards { display: flex; flex-direction: column; gap: 12px; }
.entry-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
}
.entry-card .entry-body { flex: 1 1 auto; min-width: 0; }
/* 配るリンクと企業IDは別のもの。札を付けて段を分け、並べて書かない（D-169） */
.entry-card .entry-field { margin: 12px 0 8px; }
.entry-card .entry-field .label { display: block; margin-bottom: 4px; }
.entry-card .entry-url {
  display: block; font-size: 14px; line-height: 1.6; word-break: break-all;
}
.entry-card .entry-code {
  font-family: "SF Mono", Menlo, monospace; font-size: 14px; line-height: 1.6; letter-spacing: 0.04em;
}
.entry-qr { width: 132px; height: 132px; flex: 0 0 auto; background: var(--surface); }
.entry-qr rect { fill: var(--surface); }
.entry-qr path { fill: var(--ink); }
.secret {
  font-family: "SF Mono", Menlo, monospace; font-size: 24px; letter-spacing: 0.08em;
  text-align: center; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 12px 0;
  user-select: all; word-break: break-all;
}

/* ==== 型B シフト表 ==== */
table.grid { width: auto; border-collapse: separate; border-spacing: 0; }
table.grid th, table.grid td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
table.grid thead th {
  position: sticky; top: 0; z-index: 2; background: var(--canvas); height: var(--th-h);
  font-size: 12px; font-weight: 500; padding: 0; text-align: center; min-width: 32px; color: var(--ink-muted);
}
table.grid thead th div { line-height: 1.2; }
table.grid thead th small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-faint); }
table.grid thead th.sat { color: var(--info-text); }
table.grid thead th.sun { color: var(--danger-text); }
/* 人員基準を満たさない日は列ヘッダに危険色 */
table.grid thead th.short { background: var(--danger-bg); color: var(--danger-text); }
table.grid th.name {
  position: sticky; left: 0; z-index: 3; background: var(--surface); text-align: left;
  padding: 0 12px; min-width: 128px; font-size: 13px; font-weight: 400; color: var(--ink);
  border-right: 1px solid var(--border-strong);
}
table.grid thead th.name { z-index: 4; background: var(--canvas); }
table.grid td.cell { padding: 0; text-align: center; }
table.grid tbody tr:hover { background: transparent; }
table.grid tbody tr:hover th.name { background: var(--row-hover); }
table.grid tbody tr:hover td.cell { background: var(--row-hover); }
table.grid tbody td { height: var(--row-h); }
/* セル 32×40。勤務区分は Badge で出す */
.cellbtn {
  width: 32px; min-width: 32px; height: 40px; border: none; background: transparent;
  cursor: pointer; color: var(--ink); position: relative; padding: 0;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.cellbtn:hover { background: var(--row-hover); }
.cellbtn .badge { padding: 0 3px; min-width: 22px; justify-content: center; }
/* 人が触ったセルは、機械が置いたものと見分けが付くようにする */
.cellbtn.hand::after {
  content: ""; position: absolute; right: 2px; top: 2px; width: 4px; height: 4px;
  border-radius: var(--radius-sm); background: var(--ink);
}
.cellbtn .koma2 { font-size: 11px; line-height: 1; color: var(--ink-muted); }
/* 別の施設のコマ。数えていないことを色無し・細字で伝える */
.cellbtn .koma-else { font-size: 11px; line-height: 1; color: var(--ink-muted); letter-spacing: 0.02em; }
/* 希望が出ている日は下線で示す（色だけに頼らない） */
.cellbtn.wish { border-bottom: 2px solid var(--ink-muted); }
.cellbtn.violation { outline: 2px solid var(--danger-text); outline-offset: -2px; }
.cellbtn.early .badge { background: var(--shift-early-bg); color: var(--shift-early-text); }
.cellbtn.day .badge { background: var(--shift-day-bg); color: var(--shift-day-text); }
.cellbtn.late .badge { background: var(--shift-late-bg); color: var(--shift-late-text); }
.cellbtn.night .badge { background: var(--shift-night-bg); color: var(--shift-night-text); }
.cellbtn.night_after .badge { background: var(--shift-after-bg); color: var(--shift-after-text); }
.cellbtn.off .badge { background: var(--shift-off-bg); color: var(--shift-off-text); }
.legend-box.early { background: var(--shift-early-bg); color: var(--shift-early-text); border-color: transparent; }
.legend-box.day { background: var(--shift-day-bg); color: var(--shift-day-text); border-color: transparent; }
.legend-box.late { background: var(--shift-late-bg); color: var(--shift-late-text); border-color: transparent; }
.legend-box.night { background: var(--shift-night-bg); color: var(--shift-night-text); border-color: transparent; }
.legend-box.night_after { background: var(--shift-after-bg); color: var(--shift-after-text); border-color: transparent; }
.legend-box.off { background: var(--shift-off-bg); color: var(--shift-off-text); border-color: transparent; }
/* 本人の希望と違う勤務 */
.wishmark {
  position: absolute; left: 0; top: 0; font-size: 11px; line-height: 1.4;
  background: var(--danger-text); color: var(--action-text); border-radius: 0 0 var(--radius-sm) 0; padding: 0 3px;
}
table.grid th.sum, table.grid td.sum { min-width: 48px; text-align: right; padding: 0 12px; font-size: 13px; color: var(--ink-muted); }
table.grid th.sum { border-left: 1px solid var(--border-strong); }
table.grid td.sum { border-left: 1px solid var(--border-strong); }
table.grid td.sum.nights { color: var(--ink); font-weight: 500; }
table.grid td.sum.over { color: var(--warn-text); font-weight: 500; }
table.grid tr.total td, table.grid tr.total th { background: var(--canvas); font-size: 12px; color: var(--ink-muted); height: 28px; }
table.grid tr.total td.short { color: var(--danger-text); font-weight: 500; }
/* 上段: 必要人数と配置。不足=危険 */
tr.need td, tr.need th { background: var(--canvas); font-size: 12px; height: 28px; text-align: center; color: var(--ink-muted); }
tr.need th.name { text-align: left; }
tr.need th.name b { font-size: 12px; color: var(--ink); }
tr.need td.short { background: var(--danger-bg); color: var(--danger-text); font-weight: 500; }
tr.need td.over { background: var(--info-bg); color: var(--info-text); }
tr.need td.ok { background: var(--ok-bg); color: var(--ok-text); }
tr.need td.none { color: var(--ink-faint); }
/* 未定（月内で何も無い）は薄い点。月外は空 */
.cellbtn .dot { color: var(--ink-faint); font-size: 14px; line-height: 1; }
/* 「該当日を見る」で列を浮かせる */
table.grid th.hl, table.grid td.hl { background: var(--selected); }
table.grid tbody tr:hover td.cell.hl { background: var(--selected); }
tr.shortage th.name { color: var(--danger-text); font-weight: 500; }
tr.floor th, tr.floor td { background: var(--canvas); height: 28px; border-top: 1px solid var(--border-strong); }
tr.floor th.name { font-size: 12px; font-weight: 500; color: var(--ink-muted); }
tr.floor td { font-size: 12px; color: var(--ink-muted); text-align: left; padding: 0 12px; }
tr.floor td .select-sm { display: inline-block; width: auto; min-width: 120px; }
table.grid th.name small.emp { display: inline-block; margin-left: 6px; font-size: 11px; color: var(--ink-muted); }

/* 夜勤予定表（横に施設・縦に日） */
table.grid.night th.name { min-width: 64px; text-align: center; }
table.grid.night th.name b { font-size: 13px; }
table.grid.night th.name small.wd { display: block; font-size: 11px; color: var(--ink-muted); }
table.grid.night th.fac { min-width: 200px; padding: 0 12px; text-align: left; }
table.grid.night th.fac div { font-size: 13px; color: var(--ink); }
table.grid.night th.fac small { font-size: 11px; font-weight: 400; }
table.grid.night tr.sun th.name b { color: var(--danger-text); }
table.grid.night tr.sat th.name b { color: var(--info-text); }
td.nightcell { padding: 4px 8px; vertical-align: top; height: auto; }
td.nightcell.short { background: var(--danger-bg); }
.person { margin: 2px 4px 2px 0; }
.person.support { border-style: dashed; }
.person.fixed { background: var(--neutral-bg); }
.add-slot { color: var(--danger-text); border-style: dashed; margin: 2px 0; }
.supmark, .prefmark { font-size: 11px; line-height: 1.4; border: 1px solid currentColor; border-radius: var(--radius-sm); padding: 0 3px; color: var(--ink-muted); }
.prefmark.top { color: inherit; font-weight: 700; }
.cand { width: 100%; justify-content: space-between; margin-bottom: 8px; height: auto; min-height: var(--h-md); padding: 8px 12px; white-space: normal; }
.cand.blocked { color: var(--ink-muted); border-style: dashed; cursor: not-allowed; }
.cand-name { display: flex; align-items: center; gap: 6px; text-align: left; }
.cand-info { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }

/* ==== 連絡 ====
   話は上から下へ1本。1件ずつ枠で囲むと、続けて書いた3行が3つの箱に見えて読めない。
   だから枠は付けず、日付の区切りと、同じ人の連投をまとめることで読ませる。 */
.chat-log {
  flex: 1; overflow-y: auto; background: var(--surface);
  padding: 16px 20px; display: flex; flex-direction: column; gap: 4px;
}
/* 日付の区切り。線の真ん中に「今日」「9月3日（火）」 */
.chat-day { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; }
.chat-day::before, .chat-day::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.chat-day b { font-size: 12px; font-weight: 500; color: var(--ink-muted); }
/* 未読の始まり。ここから下がまだ読んでいないもの（色だけでなく文字でも言う） */
.chat-new { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.chat-new::before, .chat-new::after { content: ""; flex: 1; height: 1px; background: var(--danger-line); }
.chat-new b { font-size: 12px; font-weight: 700; color: var(--danger-text); }

.chat-item { position: relative; padding: 4px 12px 4px 8px; border-radius: var(--radius); border-left: 2px solid transparent; }
.chat-item:hover { background: var(--row-hover); }
/* 続けて書いたぶんは、名前と時刻を省いて詰める */
.chat-item.compact { padding-top: 0; }
.chat-item.handover { border-left-color: var(--info-line); background: var(--info-bg); }
.chat-item.mentioned { border-left-color: var(--warn-line); background: var(--warn-bg); }
.chat-item.is-open { background: var(--selected); }
.chat-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-muted); }
.chat-head b { font-size: 13px; color: var(--ink); }
.chat-text { font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-text .chat-at { font-weight: 700; color: var(--action); }
.chat-item.deleted .chat-text { color: var(--ink-faint); }
.chat-foot { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
/* リアクションの札（Button の派生）。押してあるものは枠と文字をアクセント。
   数だけでなく aria-pressed でも言う（色だけで伝えない） */
.btn.chat-react { padding: 0 8px; gap: 4px; font-size: 12px; }
.btn.chat-react[aria-pressed="true"] { border-color: var(--action); color: var(--action); background: var(--action-tint); }
.chat-replies { font-size: 12px; }
/* 触っているあいだだけ出す操作。キーボードで辿れるよう、focus でも出す */
.chat-actions { display: flex; gap: 4px; opacity: 0; }
.chat-item:hover .chat-actions, .chat-item:focus-within .chat-actions { opacity: 1; }
@media (hover: none) { .chat-actions { opacity: 1; } }

.chat-composer {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; position: relative;
  padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface);
}
.chat-composer-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chat-composer-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.chat-composer .textarea { flex: 1; min-width: 200px; min-height: var(--h-md); }
.chat-replying { font-size: 12px; color: var(--info-text); }
/* @ の候補。上に出す（下は送信ボタンで隠れる） */
.chat-mentions { position: absolute; left: 20px; bottom: 100%; z-index: 8; min-width: 200px; max-height: 200px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-popover); }
.btn.chat-at-item { width: 100%; height: 32px; justify-content: flex-start; padding: 0 12px; border-radius: 0; }
.btn.chat-at-item[aria-selected="true"] { background: var(--selected); color: var(--action); }

.chat-pin { border-left: 2px solid var(--border-strong); padding: 8px 12px; margin-top: 8px; font-size: 13px; line-height: 1.5; background: var(--canvas); }
.chat-pin b { display: block; font-size: 12px; color: var(--ink-muted); }
.chat-pin span { display: block; }
/* 左のレール。未読は太字、件数と「自分あて」の印を右端に */
.mod.unread span:first-child { font-weight: 700; }
.mod .count.mention { color: var(--danger-text); font-weight: 700; }
.chat-rail-title { font-size: 12px; color: var(--ink-muted); margin: 12px 0 4px; }
.chat-rail-title:first-child { margin-top: 0; }
/* 一覧に戻る（スマホだけ）と、右を開く（タブレットだけ） */
.chat-back { display: none; }
.chat-side-toggle { display: none; }
.chat-find { max-width: 200px; }

/* ==== カレンダー ==== */
.cal-wrap { flex: 1; overflow: auto; background: var(--surface); padding: 12px 16px 20px; }
table.cal { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
table.cal thead th { font-size: 12px; font-weight: 500; color: var(--ink-muted); padding: 0 0 4px; text-align: center; background: transparent; border: none; height: auto; position: static; }
table.cal thead th.sat { color: var(--info-text); }
table.cal thead th.sun { color: var(--danger-text); }
table.cal td { padding: 0; vertical-align: top; border: none; height: auto; }
table.cal tbody tr:hover { background: transparent; }
td.cal-empty { background: transparent; }
.calday {
  width: 100%; min-height: 88px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font-size: 13px; line-height: 1.5;
  text-align: left; cursor: pointer;
}
.calday:hover { background: var(--row-hover); }
.calday.on { border-color: var(--action); background: var(--selected); }
.calday.sun .calday-num { color: var(--danger-text); }
.calday.sat .calday-num { color: var(--info-text); }
.calday-num { font-size: 13px; font-weight: 500; }
.calday-title { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); font-size: 12px; }
.calday-shift { margin-top: auto; font-size: 12px; color: var(--ink-muted); }
/* 予定が入っているのに出勤が0の日。危険色の枠と「人手なし」の文字で示す */
.calday.warn { border-color: var(--danger-line); background: var(--danger-bg); }
.calday.warn .calday-shift { color: var(--danger-text); font-weight: 500; }
.mail-item { border-left: 2px solid var(--border); padding: 8px 12px; margin-top: 8px; font-size: 13px; line-height: 1.5; background: var(--canvas); }
.mail-item b { display: block; font-size: 13px; font-weight: 500; }
.mail-item span { display: block; }

/* ==== 経営（型E） ==== */
.mgr-check { display: flex; align-items: flex-start; gap: 12px; min-height: var(--h-md); padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.5; cursor: pointer; }
.mgr-check .checkbox { margin-top: 3px; }
.mgr-check .hint { display: block; font-size: 12px; color: var(--ink-muted); }
.mgr-money { font-size: 24px; line-height: 1.2; font-weight: 700; }
.mgr-row { padding: 12px 0; border-top: 1px solid var(--border); }
.mgr-row:first-of-type { border-top: none; }
.mgr-list { margin: 4px 0 0; padding: 0 0 0 1.1em; }
.mgr-list li { font-size: 14px; color: var(--ink-muted); line-height: 1.6; }
/* 判定の根拠（告示・通知の名前と適用日と要点）。数字のすぐ下に、細い縦罫で括って置く */
.mgr-basis { margin: 8px 0 0; padding: 8px 0 8px 12px; border-left: 2px solid var(--border); }
.mgr-basis p { margin: 0; }
.mgr-basis p + p { margin-top: 2px; }
.mgr-budget-row { display: grid; grid-template-columns: 88px repeat(3, 1fr); gap: 8px; align-items: center; padding: 4px 0; }
.mgr-budget-row .label-cell { font-size: 13px; color: var(--ink-muted); }
.mgr-wage-row { display: grid; grid-template-columns: 1fr 110px 1fr; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.mgr-wage-row .name-cell { font-size: 14px; }

/* ==== 設定（型A / 型C） ==== */
.feature-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--border); }
.feature-main { flex: 1; min-width: 220px; }
.feature-title { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.feature-right { text-align: right; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink-muted); }
.rate { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
/* 音声入力。聞いている間は状態を文字でも言う（ボタンの文字が変わる） */
.voice.on { background: var(--action); color: var(--action-text); border-color: var(--action); }
.score-item { margin: 0 0 12px; }
.score-item .label { margin-bottom: 4px; }
/* 評価の尺度をラジオで選ぶ。記号の下に定義文（12px・補助色）。色ではなく文字で分かる */
.choices { display: flex; flex-direction: column; gap: 4px; }
.choice { display: flex; align-items: flex-start; gap: 8px; min-height: var(--h-sm); padding: 4px 0; font-size: 14px; line-height: 1.5; cursor: pointer; }
.choice .radio { margin-top: 3px; }
.choice .choice-def { display: block; font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
.step-list { margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
.step-list b { color: var(--ink); font-weight: 500; }
/* 打刻の写真（本人確認の見直し）。枠いっぱいに出す */
.photo-img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); }
/* 打刻の一覧に出す写真の小さな見本（勤怠）。押すと同じ写真を大きく開く */
.photo-thumb { display: block; width: 40px; height: 40px; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.photo-thumb-btn { display: inline-flex; padding: 0; min-height: 0; }
/* 勤怠の表: 打刻なしの行・合計の行・押せる行 */
tr.row-warn td { background: var(--warn-bg); }
tr.row-total td { font-weight: 700; border-top: 1px solid var(--border-strong); }
tr.row-click { cursor: pointer; }
tr.row-click.on td { background: var(--selected); }
small.emp { margin-left: 6px; font-size: 11px; color: var(--ink-muted); }
/* 根拠の開閉（経営）。見出しは本文の大きさ、開くまで表は畳む */
.disclosure { margin-top: 8px; }
.disclosure summary { cursor: pointer; font-size: 14px; color: var(--ink-muted); min-height: var(--h-sm); display: flex; align-items: center; gap: 8px; list-style: none; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary:hover { color: var(--ink); }
.disclosure[open] summary { margin-bottom: 8px; }
/* 既定は閉じる。chevron は開くと回る（120ms。prefers-reduced-motion では止まる） */
.disclosure summary .disclosure-chevron { transition: transform .12s ease; }
.disclosure[open] > summary .disclosure-chevron { transform: rotate(180deg); }
.disclosure > .table-wrap, .disclosure > .grid { margin-top: 8px; }
/* 実績の人員配置（日×帯）。帯の状態は文字＋淡色の面 */
td.band-short { background: var(--danger-bg); color: var(--danger-text); }
td.band-over { background: var(--info-bg); color: var(--info-text); }
td.band-ok { color: var(--ok-text); }
/* 希望のカレンダー。マスの中の種別は Badge、締切後は文字でも言う */
.calday .calday-wish { margin-top: auto; }
.kindtag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; font-size: 11px; font-weight: 500; border-radius: var(--radius-sm); background: var(--neutral-bg); color: var(--ink-muted); }
.readiness-badge { min-width: 64px; justify-content: center; }
.note-body { font-size: 14px; line-height: 1.6; border-top: 1px solid var(--border); padding-top: 12px; white-space: pre-wrap; }
.note-title { font-size: 14px; font-weight: 700; line-height: 1.5; }

/* 型B の週／月切り替え（スマホだけ出す。出し分けは下の @media） */
.shift-range { display: none; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
.shift-range .tabs-under { border-bottom: none; }
.shift-range .range-label { font-size: 13px; color: var(--ink-muted); flex: 1; text-align: center; }
/* 型A の「詳細」（スマホだけ出す）。畳んだ列を label: value で縦に並べる */
.row-more { display: none; }
.row-more summary { cursor: pointer; font-size: 12px; color: var(--ink-muted); min-height: var(--h-sm); display: flex; align-items: center; }
.row-more dl { margin: 4px 0 8px; display: flex; flex-direction: column; gap: 4px; }
.row-more dt { font-size: 12px; color: var(--ink-muted); }
.row-more dd { font-size: 13px; margin: 0; }

/* ==== 3つの幅（D-133）====
   PC ≥1024 はここまでの指定どおり。タブレット 768–1023 はレールを上の横並びに畳み、右パネルを本文の下へ。
   スマホ <768 は1カラム・主行動を下に固定・ダイアログは全画面。ブレークポイントはこの3つだけ。
   レールは消さない（設定に辿り着けなくなるため）。横スクロールは表の箱（.table-wrap / .shift-wrap）の中だけで起こす */

/* ---- タブレット以下（<1024） ---- */
@media (max-width: 1023.98px) {
  /* 画面全体を縦に積み、画面そのものを縦に送る。本文の箱（.pane / .shift-wrap）は自然な高さ */
  .view.on { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
  .view.on .col { flex: 0 0 auto; min-height: 0; }
  .view.on .pane { flex: none; overflow: visible; }
  .view.on .shift-wrap { flex: none; overflow-x: auto; overflow-y: visible; }
  /* まだ自動作成していない月: 表が短くても重ねた状態が切れないよう高さを確保し、横に送らない。
     週／月の切り替え（.shift-range）は .shift-wrap の外（上）にあるので、重ねても隠れない */
  .view.on .shift-wrap:has(> .shift-overlay) { min-height: 280px; overflow: hidden; }
  .shift-overlay { align-items: flex-start; padding: 16px; }
  .view.on .cal-wrap { flex: none; overflow: visible; }
  /* 連絡だけは、送信欄が下に見える高さに留める */
  .view[data-view="chat"].on .col { height: calc(100dvh - 96px); }
  .rail {
    width: auto; border-right: none; border-bottom: 1px solid var(--border);
    padding: 8px 12px; gap: 8px; overflow: visible;
  }
  .rail-head { display: none; }
  .modules, .side-group {
    flex-direction: row; align-items: center; gap: 4px; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none;
  }
  .side-group { flex: none; overflow: visible; padding-bottom: 0; }
  .side-group + .side-group { margin-top: 0; margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--border); }
  .side-group-title { padding: 0 4px 0 0; white-space: nowrap; }
  .modules::-webkit-scrollbar { display: none; }
  .mod { width: auto; border: 1px solid var(--border); }
  .rail-foot { margin-top: 0; padding: 0; }
  .rail-foot .en { display: none; }
  /* 右パネルは本文の下に、自然な高さで。40vh に切らない */
  .side { width: auto; border-left: none; border-top: 1px solid var(--border); max-height: none; overflow-y: visible; }
  .cards2 { grid-template-columns: 1fr; }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .bar { gap: 12px; padding: 0 12px; }
  .who { display: none; }
  .pane { padding: 16px; }
  .card { padding: 16px; }
  .tile .num { font-size: 24px; }
  .shift-actions .btn-primary, .shift-actions .btn-secondary { height: var(--h-md); padding: 0 12px; }
  .chat-log { padding: 12px 16px; }
  .chat-composer { padding: 12px 16px; }
  .chat-composer .textarea { min-width: 100%; order: -1; }
  .feature-right { text-align: left; flex-direction: row; gap: 8px; align-items: baseline; }
  .pane-head, .page-header { flex-direction: column; }
  .pane-head > :last-child { margin-left: 0; }
  .page-header .page-tools { justify-content: flex-start; }
  .shift-actions { margin-left: 0; width: 100%; }
  .cal-wrap { padding: 8px; }
  .calday { min-height: 72px; padding: 4px 6px; }
  .calday-title { display: none; }
  .savebar { padding: 0 16px; }
}

/* ---- タブレットだけ（768–1023） ---- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side { padding: 16px 20px; }
  /* 連絡: 右は畳んでおき「詳細」で開く。左と中は横幅が足りるので出したまま */
  .chat-side-toggle { display: inline-flex; align-items: center; }
  .view[data-view="chat"] .side { display: none; }
  .view[data-view="chat"] .side.open { display: flex; }
}

/* ---- スマホ（<768） ---- */
@media (max-width: 767.98px) {
  /* 主行動は画面の下に固定（型D の .primary-action を全画面に広げる）。上の帯の主ボタンそのものを下へ動かす */
  .view.on .primary-action { display: block; }
  /* 「自分」の見方では、今日の打刻のボタンが本体。下の固定ボタンは出さない（入口を2つ作らない） */
  .view.on .primary-action[hidden] { display: none; }
  .view.on .shift-actions #time-punch { display: none; }
  .view.on .shift-bar .btn-primary,
  .view.on .col-head .btn-primary,
  .view.on .page-header .btn-primary {
    position: fixed; left: 16px; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom));
    height: var(--h-lg); width: auto; font-size: 14px; z-index: 9;
  }
  /* 固定したボタンが本文の最後の行に重なる。いちばん下まで読める余白を足す */
  .view.on .col,
  .view.on .side { padding-bottom: 96px; }
  /* 右パネルが下に続くときは、本文ではなくパネルの下に余白を置く（畳んだシフトの右パネルは除く） */
  .view.on .col:has(+ .side) { padding-bottom: 0; }
  .view[data-view="shift"].on .col:has(+ .side:not(.open)) { padding-bottom: 96px; }
  .savebar { padding: 0 16px calc(env(safe-area-inset-bottom)); height: calc(48px + env(safe-area-inset-bottom)); }
  /* 指で押せる大きさ（44）。PC の高さの目盛りはそのまま */
  .btn, .tab, .mod { min-height: var(--h-lg); }
  .tabs-under .tab, .subtabs .tab { height: var(--h-lg); }
  .cellbtn { width: 40px; min-width: 40px; height: var(--h-lg); }
  table.grid thead th { min-width: 40px; }
  table.grid tbody td { height: var(--h-lg); }
  .view[data-view="time"] .btn { height: var(--h-lg); }
  /* 上の帯: 施設名は1行に収め、副題は出さない */
  .brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28vw; }
  .bar-right { gap: 8px; }
  /* 文字の大きさの切替は「Aa」だけ見せる（読み上げは元の文のまま。タブの場所を空ける） */
  .bar #font-scale { width: var(--h-md); padding: 0; overflow: hidden; color: transparent; white-space: nowrap; }
  .bar #font-scale::before { content: "Aa"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 13px; font-weight: 500; }
  .bar #font-scale[aria-pressed="true"]::before { color: var(--action); }
  /* 職員を足す: 欄を縦に積む（氏名の欄が潰れていた） */
  .add-form > .field { flex: 1 1 100%; }
  .brand-sub { display: none; }
  /* 上の段は横に送る。選んだタブは JS で中央に寄せる */
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .subtabs { scrollbar-width: none; }
  .subtabs::-webkit-scrollbar { display: none; }
  /* 右パネルは畳んでおき「詳細」で開く（シフト表） */
  .side-toggle { display: inline-flex; align-items: center; }
  .view[data-view="shift"] .side { display: none; }
  .view[data-view="shift"] .side.open { display: flex; }
  /* 連絡: 一覧（左）と話（中）を入れ替える。戻る矢印で一覧へ */
  .chat-back { display: inline-flex; align-items: center; }
  .view[data-view="chat"][data-pane="list"] .col,
  .view[data-view="chat"][data-pane="list"] .side { display: none; }
  .view[data-view="chat"][data-pane="channel"] .chat-rail { display: none; }
  .view[data-view="chat"][data-pane="channel"].on .col { height: auto; flex: 1; }
  .side { padding: 16px; }
  .cards { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today-mine .kv { flex-wrap: wrap; }
  /* 導入ウィザード: 選択肢と次へ／あとでは指の幅いっぱいに */
  .wiz-choices .btn, .wiz-actions .btn { flex: 1 1 100%; }
  .shift-bar { gap: 8px; padding: 8px 12px; }
  .shift-bar b { min-width: 0; }
  .shift-actions .btn { flex: 1 1 auto; padding: 0 8px; }
  .state { padding: 24px 16px; }
  .state.error, .state.forbidden { margin: 12px auto; }
  /* 型B: 週／月の切り替え（スマホだけ出す） */
  .shift-range { display: flex; }
  /* 型A: 重要3列だけ出し、残りは「詳細」に畳む（カードの縦積みはしない） */
  .table-wrap.phone-keep td.ph-hide, .table-wrap.phone-keep th.ph-hide { display: none; }
  .table-wrap.phone-keep .row-more { display: block; }
  /* ダイアログは全画面。中で縦に送る */
  dialog, dialog.modal-md, dialog.modal-lg {
    width: 100vw; max-width: none; height: 100dvh; max-height: none;
    border: none; border-radius: 0; margin: 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  }
  .dialog-actions { position: sticky; bottom: 0; background: var(--surface); padding-top: 12px; }
  .dialog-actions .btn { flex: 1 1 auto; }
}

/* 高コントラストを求める設定では罫線を濃くする */
@media (prefers-contrast: more) {
  :root { --border: #CDC5B4; --border-strong: #96907F; --border-control: #52525B; --ink-faint: #52525B; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .btn:active:not(:disabled), .mod:active, .cellbtn:active { transform: none; }
  .skeleton::after { animation: none; }
}

/* 中身の無いバッジは出さない（勤怠の月送りの横に空の四角が出ていた） */
.badge:empty { display: none; }
/* 表の見出しは折り返さない（「割り当て」が縦書きになっていた）。幅は .table-wrap の横スクロールで吸収する */
th { white-space: nowrap; }

/* 希望タブのカレンダー。.cal-wrap は flex:1 で「残りの高さ」を取る前提なので、
   縦に積む希望タブの中では高さ 0 に潰れていた（qa-stg で確認）。ここでは自然な高さにする */
#wish-wrap .cal-wrap { flex: none; overflow: visible; padding: 0; }

/* 右パネルと本文は縦に積む flex。中身が増えると子（ボタン・表）が縮んで潰れる。縮めない */
.side > *, .pane > * { flex-shrink: 0; }

/* 評価の右パネル「いま必要なこと」。段階×期限で 1 行、名前は押せる札 */
.due-group { padding: 8px 0; border-top: 1px solid var(--border); }
.due-group.is-overdue strong { color: var(--danger-text); }
/* 導入ウィザード（D-149）。1 問 1 画面。問いかけは 24px、進み具合は 4px の細い棒（色は accent） */
.wiz { max-width: 640px; }
.wiz-progress { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.progress { display: block; width: 100%; height: 4px; appearance: none; border: none; border-radius: 0; background: var(--border); color: var(--action); }
.progress::-webkit-progress-bar { background: var(--border); }
.progress::-webkit-progress-value { background: var(--action); }
.progress::-moz-progress-bar { background: var(--action); }
.wiz-ask { font-size: 24px; line-height: 1.4; font-weight: 700; margin: 8px 0 0; }
.wiz-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.wiz-control .row { flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chips .chip { padding: 0 12px; min-height: 32px; border-radius: 6px; }

/* ==== データと学習（D-137〜D-142）の部品 ==== */
/* 差分（unified diff）。+ は正常色、- は危険色。記号（+/-）は文字として残す（色だけで伝えない） */
.diff { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--surface); }
.diff .diff-add { display: block; background: var(--ok-bg); color: var(--ok-text); }
.diff .diff-del { display: block; background: var(--danger-bg); color: var(--danger-text); }
.diff .diff-hunk { display: block; color: var(--info-text); }
.diff .diff-ctx { display: block; color: var(--ink-muted); }
/* YAML・JSON の読むだけの本文。上に「コピー」を置く */
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 48vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--surface-2); }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
/* ダブルチェックの指摘。重さ（法令／現場のやり方／入力）の札は文字＋色。法令だけ罫線も濃くする */
.check-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-top: 8px; }
.check-item.is-law { border-color: var(--danger-line); }
.check-item .check-target { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }
.check-item .row-end { margin-top: 8px; }
/* 経路つきの検証エラー（manifest の保存）。経路は等幅、理由は本文 */
.path-errors { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.path-errors li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; line-height: 1.5; color: var(--danger-text); }
.path-errors code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--ink); background: var(--surface-2); border-radius: var(--radius-sm); padding: 0 4px; }
/* 段階を示す番号（接続を足す 1/2） */
.steps { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.steps .step { font-size: 12px; line-height: 1.4; color: var(--ink-muted); padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius); }
.steps .step.on { color: var(--action); border-color: var(--action); font-weight: 500; }
/* 目標への到達率は数字だけ（棒は描かない）。目標の説明は 12px の補助文 */
.target-note { font-size: 12px; line-height: 1.5; color: var(--ink-muted); margin-top: 8px; }
/* 監査の連鎖の札と、選択中のオブジェクト行 */
.obj-row { cursor: pointer; }
.obj-row.sel { background: var(--selected); }
/* 用途の札（選択中）。枠と文字をアクセント、印はチェックのアイコン */
.chips .chip.on { border-color: var(--action); color: var(--action); background: var(--action-tint); }

/* ==== シフト表: 範囲選択・個人の縦並び・印刷 ==== */
/* 範囲でまとめて塗るときに選んだマス。色だけに頼らず、帯にも「何コマ選んでいるか」を出す */
table.grid td.cell.picked { background: var(--selected); outline: 2px solid var(--action); outline-offset: -2px; }
table.grid tbody tr:hover td.cell.picked { background: var(--selected); }
/* 範囲を選んでいる間だけ出る帯 */
#shift-range-bar:empty { display: none; }
#shift-range-bar { margin: 8px 0; }
/* 個人のシフト（自分の当月を日ごとの縦並びで）。スマホで1行ずつ読む形 */
.daylist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.daylist-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.6; }
.daylist-item:last-child { border-bottom: none; }
.daylist-date { min-width: 72px; font-weight: 500; color: var(--ink); }
.daylist-koma { display: flex; gap: 4px; flex-wrap: wrap; }
.daylist-note { color: var(--ink-muted); font-size: 13px; }
.daylist-item.off { background: var(--surface-2); }
.daylist-item.none .daylist-date { color: var(--ink-muted); }

/* 印刷。A3 横でも A4 縦でも読めるように、色を落としても記号（早/日/遅/夜/明/公）で分かる形にする。
   画面だけのもの（上下のタブ・右のパネル・操作の帯）は出さない。 */
@media print {
  body { background: var(--surface); }
  .bar, .subtabs, .alerts, .savebar, .toast, .side, .shift-bar, #shift-tabs, #shift-range-bar,
  #shift-guide, .shift-range, .state-actions, .row-end { display: none; }
  main, .view, .col { display: block; margin: 0; padding: 0; }
  .view { display: none; }
  .view.on { display: block; }
  .shift-wrap { overflow: visible; max-height: none; }
  table.grid { width: 100%; border-collapse: collapse; }
  table.grid th, table.grid td { border: 1px solid var(--border-strong); }
  /* 罫線と記号だけで読めるようにする（プリンタが色を落としても意味が消えない） */
  .cellbtn { width: auto; min-width: 0; height: auto; }
  .cellbtn .badge { border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); }
  /* 確認が必要なマスは、色が落ちても分かるように点線の枠にする */
  .cellbtn.violation { outline-style: dotted; }
  .shift-overlay { display: none; }
  .daylist-item { break-inside: avoid; }
  /* 既定は A4 縦（個人のシフト・希望・交代の一覧）。月の表だけ A3 横で出す */
  @page { size: A4 portrait; margin: 10mm; }
  @page shiftgrid { size: A3 landscape; margin: 10mm; }
  body.printing-shift { page: shiftgrid; }
}