/* 570 suite の部品の写し (原本 ~/Program/kosei-machine/frontend/assets/suite.css 2026-10-16)。直すときは原本を直してから写す。色は app.css の :root で上書き */
/* 570 suite の部品 — **3部署 (kabosu / pink / blue) で共通の「部品」の形はここ1枚が正** (2026-09-22 v3)。
 *
 * ここに置くのは、置き場所に関係なく同じ形でよい部品だけ:
 *   ボタン / 入力欄 / 小窓 / タブ / 札 / 知らせ / 開くメニュー / アイコンのボタン / フォーカスの輪 / 進み具合
 * **幅・余白・位置は決めない** (それは画面の組み立てで、部署の CSS が持つ)。
 * 地の色・箱・表・見出し・余白も部署のまま (2026-09-22 に組み立てまで揃えて「見づらい」となった)。
 *
 * 部署ごとに違うのは色だけ。各部署の CSS は先頭で次の3つを上書きする:
 *   --s-band 帯 / --s-accent アクセント (主ボタン・選択・枠) / --s-deep 濃い色 (見出し・選択の文字・知らせ)
 * 薄い地・線はこの3つから color-mix で作る。書体は assets/base.css の1行 (--base-font) が正。
 *
 * 決めた形は docs/suite統一計画.md (v3)。
 */

:root {
  --s-band: #999;
  --s-accent: #666;
  --s-deep: #333;

  --s-hover: color-mix(in srgb, var(--s-accent) 9%, #fff);    /* なぞった行・メニュー */
  --s-tint:  color-mix(in srgb, var(--s-accent) 16%, #fff);   /* 選択中 */
  --s-thead: color-mix(in srgb, var(--s-accent) 10%, #fff);   /* タブの地 */

  --s-ink: #222;
  --s-ink-sub: #525252;
  --s-ink-mute: #6b7280;
  --s-grey: #d9d9d9;    /* 入力欄・白ボタンの枠 */
  --s-faint: #e6e6e6;
  --s-danger: #b91c1c;

  /* 意味の色 (3部署共通。札と状態の欄) */
  --s-todo-bg: #fff3cd; --s-todo-fg: #7a5b00;   /* 未・待ち */
  --s-ok-bg: #e2f4e2;   --s-ok-fg: #1a6b1a;     /* 済 */
  --s-info-bg: #e3f0fb; --s-info-fg: #1a5c9e;   /* まとめ・処理中 */
  --s-off-bg: #eceff1;  --s-off-fg: #6b7280;    /* 移行分・無効 */
  --s-warn-bg: #fdecea; --s-warn-fg: #c0392b;   /* 要確認 */

  --s-radius: 4px;        /* ボタン・欄 */
  --s-radius-modal: 10px; /* 小窓 */
  --s-radius-tab: 6px;
  --s-radius-badge: 9px;
}

:focus-visible { outline: 2px solid var(--s-deep); outline-offset: 1px; }

/* ---------------------------------------------------------------- ボタン */
button {
  font: inherit; font-size: 14px; line-height: 20px; padding: 7px 16px;   /* 高さ 36 = 入力欄と同じ */
  border-radius: var(--s-radius); cursor: pointer;
  border: 1px solid transparent; background: #f2f2f2; color: var(--s-ink);
}
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--s-accent); border-color: var(--s-accent); color: #fff; font-weight: 700; }
button.primary:hover:not(:disabled) { background: var(--s-deep); border-color: var(--s-deep); }
button.ghost { background: #fff; border-color: var(--s-accent); color: var(--s-accent); }          /* キャンセル */
button.ghost:hover:not(:disabled) { background: var(--s-hover); }
button.plain { background: #fff; border-color: var(--s-ink-mute); color: var(--s-ink-mute); }      /* 閉じる */
button.plain:hover:not(:disabled) { background: #f6f6f6; }
button.danger { background: #fff; border-color: var(--s-danger); color: var(--s-danger); }        /* 消す */
button.danger:hover:not(:disabled) { background: var(--s-warn-bg); }
/* 二段確認 (入金済 / 本当に削除 …) 2026-09-23 の形:
   1回目でボタンは ✕ (やめる) に変わり、聞く言葉は**ボタンの真上に別の層の赤い札 (.arm-go)** として出る。
   札を押す=実行 / ✕・他の場所=やめる。ボタンの大きさは変えないので表の列が動かない。
   JS は pink の common.js の wireConfirm (3部署で同じものを使う) */
button.arm, button.arm:hover:not(:disabled) { background: #fff; border-color: var(--s-grey); color: var(--s-ink-sub); }
button.arm-go {
  position: fixed; z-index: 2600; margin: 0;
  background: var(--s-danger); border-color: var(--s-danger); color: #fff;
  font-size: 12px; line-height: 16px; font-weight: 700; padding: 5px 12px; height: auto;
  border-radius: var(--s-radius); white-space: nowrap; box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}
button.arm-go:hover { background: #8f1414; border-color: #8f1414; }
button.mini { padding: 5px 9px; font-size: 12px; line-height: 16px; }   /* 28px = くっつけた切り替え (.seg) と同じ高さ。同じ行に並ぶ (2026-09-24) */
button.textbtn { padding: 0 2px; border: 0; background: none; color: var(--s-accent); font-size: 12px; line-height: inherit; }
button.textbtn:hover:not(:disabled) { text-decoration: underline; }
/* 控えめな例外の口 (手動入金処理 など)。すごく薄い 10px の文字に 1px の灰の罫。
   二段確認では文字を変えず、上に赤い札だけ出す */
button.quiet { font-size: 10px; line-height: 14px; padding: 2px 8px; height: auto; background: transparent;
  border: 1px solid #ccc; color: #b0b0b0; font-weight: 400; }
button.quiet:hover:not(:disabled) { color: #888; border-color: #aaa; }
button.quiet.arm, button.quiet.arm:hover:not(:disabled) { background: transparent; border-color: #aaa; color: #888; }
button.linkbtn { padding: 0; border: 0; background: none; color: var(--s-deep); text-decoration: underline; font-size: 13px; line-height: inherit; }

/* ---------------------------------------------------------------- 開く印 ○▶
   行の下に内訳や直す欄が「伸びて出てくる」ところに置く。<button class="fold" title="内訳を出す"></button>
   開いているときは .open (右回りに 90° 回って ▼)。描き直した直後に .spin を付けると回る動きが出る。
   伸びて出てくる行は <tr class="reveal"> にし、中身を <div class="cell"> で包む (高さを 0 から伸ばすため)。
   何行も続くときは tr の --d に遅れ (ms) を入れると順に出てくる */
button.fold {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 18px; height: 18px; padding: 0; margin: 0; box-sizing: border-box;
  border: none; border-radius: 50%; background: none; color: #9a9a9a;   /* ▶ だけ。○ の枠は 2026-09-25 に外した (行の左端に丸が並ぶとボタンの列に見えてうるさい) */
  vertical-align: middle; line-height: 1; cursor: pointer;
  transition: color .15s, background-color .15s;
}
button.fold::before { content: ""; display: block; width: 8px; height: 9px; margin-left: 2px; background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%); }
button.fold:hover:not(:disabled) { color: var(--s-ink); background: var(--s-hover); }
button.fold.open { transform: rotate(90deg); }
button.fold.spin { animation: s-fold-open .4s cubic-bezier(.3, .9, .35, 1.3) both; }
button.fold.spin:not(.open) { animation-name: s-fold-close; }
@keyframes s-fold-open  { from { transform: rotate(0deg); }  to { transform: rotate(90deg); } }
@keyframes s-fold-close { from { transform: rotate(90deg); } to { transform: rotate(0deg); } }
tr.reveal > td { animation: s-row-grow .34s ease-out var(--d, 0ms) backwards; }
tr.reveal > td > .cell, tr.reveal > td > .inline-edit { overflow: hidden; animation: s-cell-grow .34s ease-out var(--d, 0ms) backwards; }
tr.reveal > td > .inline-edit { animation-name: s-box-grow; }
@keyframes s-row-grow  { from { padding-top: 0; padding-bottom: 0; opacity: 0; } to { opacity: 1; } }
@keyframes s-cell-grow { from { max-height: 0; } to { max-height: 48px; } }
@keyframes s-box-grow  { from { max-height: 0; } to { max-height: 320px; } }
tr.reveal > td > .inline-edit.tall { animation-name: s-box-grow-tall; }   /* 借入の条件のように 320px を超える箱 */
@keyframes s-box-grow-tall { from { max-height: 0; } to { max-height: 720px; } }
@media (prefers-reduced-motion: reduce) {
  button.fold.spin, tr.reveal > td, tr.reveal > td > .cell, tr.reveal > td > .inline-edit { animation: none; }
}

/* ---------------------------------------------------------------- アイコンのボタン
   3部署で同じ絵 (SVG) にする。<button class="icon" data-icon="del" title="削除"></button>
   絵は currentColor で塗るので、色は文字色で決まる。 */
button.icon {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  width: 28px; height: 28px; padding: 0; line-height: 1;
  background: none; border: 1px solid transparent; color: #777; font-size: 13px; vertical-align: middle;
}
button.icon:hover:not(:disabled) { background: var(--s-hover); border-color: var(--s-grey); color: var(--s-ink); }
button.icon:disabled { opacity: .35; }
button.icon[data-icon]::before {
  content: ""; display: block; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--s-icon) center / 16px 16px no-repeat; mask: var(--s-icon) center / 16px 16px no-repeat;
}
button.icon[data-icon="del"]:hover:not(:disabled):not(.arm) { color: var(--s-danger); }
button.icon[data-icon="del"]   { --s-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 4h11M6 4V2.5h4V4M4 4l.8 9.5h6.4L12 4M6.5 7v4M9.5 7v4'/></svg>"); }
button.icon[data-icon="edit"]  { --s-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M11.5 2.5l2 2L5 13H3v-2z'/></svg>"); }
button.icon[data-icon="copy"]  { --s-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'><rect x='5.5' y='5.5' width='8' height='8' rx='1'/><path d='M10.5 5.5v-2a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2'/></svg>"); }
button.icon[data-icon="close"] { --s-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'><path d='M3.5 3.5l9 9M12.5 3.5l-9 9'/></svg>"); }
button.icon[data-icon="search"]{ --s-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'><circle cx='7' cy='7' r='4.2'/><path d='M10.2 10.2L14 14'/></svg>"); }
button.icon[data-icon="add"]   { --s-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><path d='M8 3v10M3 8h10'/></svg>"); }
button.icon[data-icon="print"] { --s-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'><path d='M4.5 6V2.5h7V6M4.5 11H3a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1.5'/><rect x='4.5' y='9' width='7' height='4.5'/></svg>"); }
button.icon[data-icon="move"]  { --s-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 8h11M9.5 4l4 4-4 4'/></svg>"); }
button.icon[data-icon="up"]    { --s-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 10l4.5-4.5L12.5 10'/></svg>"); }
button.icon[data-icon="down"]  { --s-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 6l4.5 4.5L12.5 6'/></svg>"); }
button.icon[data-icon="check"] { --s-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5l3.2 3L13 4.5'/></svg>"); }
button.icon[data-icon="undo"]  { --s-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 4L2.5 7.5 6 11M3 7.5h6.5a3.5 3.5 0 0 1 0 7H8'/></svg>"); }
button.icon[data-icon="warn"]  { --s-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2.5L14.5 13.5H1.5z'/><path d='M8 6.5v3.2M8 12h.01'/></svg>"); }
button.icon[data-icon="gear"]  { --s-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4'><circle cx='8' cy='8' r='2.2'/><path d='M8 1.8v2M8 12.2v2M1.8 8h2M12.2 8h2M3.6 3.6l1.4 1.4M11 11l1.4 1.4M3.6 12.4L5 11M11 5l1.4-1.4'/></svg>"); }

/* ---------------------------------------------------------------- 入力欄 (見た目だけ。幅は部署が決める) */
/* type の無い <input> は文字の欄 (ブラウザの既定と同じ)。書き忘れた欄だけ素の見た目で
   浮いていた (給与管理の数字の欄・台帳の備考) ので、text と同じに扱う */
input:not([type]), input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="url"],
input[type="date"], input[type="month"], input[type="time"], input[type="number"], textarea, select {
  padding: 7px 9px; border: 1px solid var(--s-grey); border-radius: var(--s-radius);
  font: inherit; font-size: 14px; color: var(--s-ink); background: #fff; box-sizing: border-box;
}
/* 高さと文字を揃える。select と date はネイティブ描画だと指定した書体・大きさを無視して別の字で描く
   (Chrome/Safari とも) ので appearance: none で自前の描画にし、矢印は背景で描く */
input:not([type]), input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="url"],
input[type="date"], input[type="month"], input[type="time"], input[type="number"], select {
  height: 36px; line-height: 20px;
  -webkit-appearance: none; appearance: none;
}
/* チェックは自前で描く (2026-09-25 峯岸さん指示: ✓ は白・kabosu と pink で同じ見た目に)。
   accent-color だと Chrome が明るい部署の色の上に黒い ✓ を選び、Safari は色を勝手に濃くして、部署とブラウザで見た目が違った。
   白い箱・灰の枠 → 入れると部署の色の箱に白い ✓ (SVG)。半端 (indeterminate) は白い横棒。丸 (radio) はブラウザ任せのまま */
input[type="radio"] { accent-color: var(--s-accent); width: 16px; height: 16px; vertical-align: middle; cursor: pointer; }
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0; vertical-align: middle; cursor: pointer; flex: none;
  border: 1px solid #8f8f8f; border-radius: 3px; background: #fff center / 13px 13px no-repeat;
}
input[type="checkbox"]:checked { border-color: var(--s-accent); background-color: var(--s-accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5l3.2 3L13 4.5'/></svg>"); }
input[type="checkbox"]:indeterminate { border-color: var(--s-accent); background-color: var(--s-accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'><path d='M3.5 8h9'/></svg>"); }
input[type="checkbox"]:hover:not(:disabled):not(:checked) { border-color: var(--s-accent); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--s-deep); outline-offset: 1px; }
input[type="checkbox"]:disabled { opacity: .45; cursor: default; }
select {
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
select:disabled { background-color: #f4f6f8; }
/* 部署の色のプルダウン (くっつけた切り替えの隣に置くとき。枠と文字を同じ色に。矢印の色は部署の CSS が上書きする) */
select.accent { border-color: var(--s-accent); color: var(--s-accent); }
textarea { resize: vertical; line-height: 1.6; -webkit-appearance: none; appearance: none; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
input[type="date"]::-webkit-date-and-time-value, input[type="month"]::-webkit-date-and-time-value { text-align: left; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { margin: 0; }
input[readonly], textarea[readonly] { background: #f4f6f8; color: var(--s-ink-sub); }
input:disabled, select:disabled, textarea:disabled { opacity: .55; }

/* ---------------------------------------------------------------- 小窓 */
.modal {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 2000;
  display: flex; align-items: flex-start; justify-content: center; padding: 50px 16px; overflow: auto;
}
.modal[hidden] { display: none; }
.sheet {
  background: #fff; border-radius: var(--s-radius-modal); width: 100%; max-width: 440px; padding: 18px 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: 12px;
}
.sheet.wide { max-width: 680px; }
.sheet > .seg { align-self: flex-start; }   /* 小窓は縦の flex で子が横いっぱいに伸びる。切り替えは中身の幅のまま (2026-09-24 借入を追加) */
.sheet h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--s-deep); }
.actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; justify-content: flex-end; }
.actions .spacer { flex: 1; }
.actions .danger { margin-right: auto; }   /* 消すボタンは左端 (保存の隣に置かない) */

/* ---------------------------------------------------------------- タブ */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--s-grey); }
.tabs .tab {
  border: 1px solid var(--s-grey); border-bottom: none; cursor: pointer;
  background: var(--s-thead); color: var(--s-accent);
  font: inherit; font-size: 14px; line-height: 1; padding: 9px 22px;
  border-radius: var(--s-radius-tab) var(--s-radius-tab) 0 0; min-width: 120px; text-align: center;
  text-decoration: none;
}
.tabs .tab:hover { background: var(--s-hover); }
.tabs .tab.active {
  background: #fff; color: var(--s-deep); font-weight: 700;
  border-color: var(--s-accent); border-bottom: 2px solid #fff; margin-bottom: -1px;
}
/* セグメント (2〜3択の切り替え)。境目なしで1つの枠に**くっつける**。選んだ側の塗りは
   ::before の1枚で、押すと塗りが横に滑って移る (2026-09-24 峯岸さん指示)。
   位置は --seg-x / --seg-w (JS の segSlide が .on のボタンを測って入れる。common.js)。
   JS が入れていない (.slid が無い) ときは .on のボタン自身を塗る (動きなし) */
.seg { position: relative; display: inline-flex; border: 1px solid var(--s-accent); border-radius: var(--s-radius); overflow: hidden; background: #fff; isolation: isolate; }
.seg::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--seg-x, 0px); width: var(--seg-w, 0px); background: var(--s-accent); z-index: 0;
  transition: left .24s cubic-bezier(.4, 0, .2, 1), width .24s cubic-bezier(.4, 0, .2, 1); }
.seg.snap::before { transition: none; }   /* 描き直した直後に前の位置へ置くとき (そこから滑る) */
.seg button { position: relative; z-index: 1; border: 0; border-radius: 0; background: transparent; color: var(--s-accent); padding: 5px 12px; font-size: 12px; line-height: 16px; transition: color .24s; }
.seg button:hover:not(.on):not(:disabled) { background: var(--s-hover); }
.seg button.on { color: #fff; }
.seg.tall button { padding: 9px 12px; }   /* 36px = 欄とボタンの行 (.row.fields) に並べるとき */
/* 棒の両端の ◀ ▶ (2026-09-24 売上と粗利の月送り)。.seg の中の最初と最後に置くと、札と矢印が1本の棒に見える。
   細い仕切りで札と分け、絵は ○▶ と同じ三角 */
.seg button.step { display: flex; align-items: center; padding-left: 12px; padding-right: 12px; }
.seg button.step::before { content: ""; display: block; width: 7px; height: 8px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.seg button.step.back::before { transform: rotate(180deg); }
.seg button.step.back + *, .seg button.step:last-child { border-left: 1px solid color-mix(in srgb, var(--s-accent) 35%, #fff); }
/* 棒の中のプルダウン: [◀ 2026年 (25期) ▶] のように両端の矢印で送る (2026-09-24 売上詳細の期) */
.seg select { border: 0; border-radius: 0; height: 26px; padding: 0 30px 0 12px; font-size: 12px; color: var(--s-accent); background-color: transparent; }
.seg.tall select { height: 34px; }
.seg:not(.slid) button.on { background: var(--s-accent); }
@media (prefers-reduced-motion: reduce) { .seg::before, .seg button { transition: none; } }

/* ---------------------------------------------------------------- 暦の小窓 (日付を選ぶ部品)
   <input type="date"> は suite.js が文字の欄 (data-date) に置き換え、押すと欄の下に暦 (.s-cal) を出す。
   形は「A. ひと月」(2026-09-24 決定。見本 docs/suite-design/datepicker.html)。
   今日は細い枠、選んだ日は部署の色の塗り、日曜は赤・土曜は青。表の中 (td) では一回り小さい (.small) */
input[data-date] {
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.5'><rect x='2' y='3' width='12' height='11' rx='1.5'/><path d='M2 6.5h12M5 1.5v3M11 1.5v3'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 15px 15px;
}
table.list td input[data-date] { padding-right: 26px; background-position: right 6px center; background-size: 13px 13px; }
.s-cal {
  position: fixed; z-index: 2700; width: 224px; box-sizing: content-box; background: #fff; color: var(--s-ink);
  border: 1px solid var(--s-faint); border-radius: 6px; box-shadow: 0 6px 22px rgba(0, 0, 0, .14);
  padding: 10px 12px; font-size: 12px; user-select: none;
}
.s-cal.small { width: 196px; }
/* 小窓 (.sheet) の中: 浮かせずに欄の行の下へ流し込む (下のボタンはずれてよい。ボタンにかぶさらない) */
.s-cal.inflow { position: static; align-self: flex-start; margin-top: -4px; }
.s-cal[hidden] { display: none; }
.s-cal .head { display: flex; align-items: center; justify-content: space-between; height: 28px; margin-bottom: 6px; }
.s-cal .ym { font-size: 13px; font-weight: 700; }
.s-cal .nav { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--s-ink-mute); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.s-cal .nav:hover { background: var(--s-hover); color: var(--s-ink); }
.s-cal .nav::before { content: ""; width: 6px; height: 7px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); margin-left: 1px; }
.s-cal .nav.back::before { transform: rotate(180deg); margin: 0 1px 0 0; }
.s-cal .dow, .s-cal .days { display: grid; grid-template-columns: repeat(7, 1fr); }
.s-cal .dow span { text-align: center; font-size: 10px; color: var(--s-ink-mute); padding: 2px 0 4px; }
.s-cal .dow .sun { color: #c0392b; } .s-cal .dow .sat { color: #2563eb; }
.s-cal .days button { display: block; width: 30px; height: 30px; margin: 1px auto; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--s-ink); font: inherit; font-size: 12px; line-height: 1; cursor: pointer; }
.s-cal.small .days button { width: 26px; height: 26px; font-size: 11px; }
.s-cal .days .out { color: #c4c8cd; }
.s-cal .days .sun:not(.out) { color: #c0392b; } .s-cal .days .sat:not(.out) { color: #2563eb; }
.s-cal .days .hol:not(.out) { color: #c0392b; }   /* 祝日は日曜と同じ赤 (suiteDate.setHolidays で渡す。2026-10-16) */
.s-cal .days .dis, .s-cal .days .dis.sat, .s-cal .days .dis.sun, .s-cal .days .dis.hol, .s-cal .days .dis:hover { color: #c4c8cd; background: none; cursor: default; text-decoration: line-through; pointer-events: none; }   /* min / max の外 (2026-10-16)。土日祝も灰。押しても何も起きない */
.s-cal .days button:hover, .s-cal .days .focus { background: var(--s-hover); }
.s-cal .days .today { box-shadow: inset 0 0 0 1.5px var(--s-accent); }
.s-cal .days .on, .s-cal .days .on:hover { background: var(--s-accent); color: #fff; }
.s-cal .foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--s-faint); }

/* ---------------------------------------------------------------- 時刻の小窓 (時刻を選ぶ部品。2026-10-16)
   <input type="time"> は suite.js が文字の欄 (data-time) に置き換え、押すと欄の下に 2 列の一覧 (.s-time 左が時・右が分) を出す。
   見た目は暦と同じ白い札。選んだ行は部署の色の塗り */
input[data-time] {
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'><circle cx='8' cy='8' r='6'/><path d='M8 4.5V8l2.5 1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 15px 15px;
}
.s-time {
  position: fixed; z-index: 2700; width: 120px; box-sizing: content-box; background: #fff; color: var(--s-ink);
  border: 1px solid var(--s-faint); border-radius: 6px; box-shadow: 0 6px 22px rgba(0, 0, 0, .14);
  padding: 6px; font-size: 12px; user-select: none;
}
.s-time.inflow { position: static; align-self: flex-start; margin-top: -4px; }
.s-time[hidden] { display: none; }
.s-time .cols { display: flex; height: 180px; }
.s-time .col { flex: 1; overflow-y: auto; scrollbar-width: none; }
.s-time .col::-webkit-scrollbar { display: none; }
.s-time .col + .col { border-left: 1px solid var(--s-faint); }
.s-time .col button { display: block; width: 100%; height: 28px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--s-ink); font: inherit; font-size: 13px; cursor: pointer; }
.s-time .col button:hover { background: var(--s-hover); }
.s-time .col button.on, .s-time .col button.on:hover { background: var(--s-accent); color: #fff; }
.s-time .foot { display: flex; justify-content: flex-end; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--s-faint); }
.s-time .foot button { padding: 3px 6px; border: 0; border-radius: 4px; background: none; color: var(--s-accent); font: inherit; font-size: 12px; line-height: 1.3; cursor: pointer; }
.s-time .foot button:hover { background: var(--s-hover); }
.s-cal .foot button { padding: 3px 6px; border: 0; border-radius: 4px; background: none; color: var(--s-accent); font: inherit; font-size: 12px; line-height: 1.3; cursor: pointer; }
.s-cal .foot button:hover { background: var(--s-hover); }

/* ---------------------------------------------------------------- 待ち (くるくる)
   時間のかかる読み込みの間に出す。<div class="busy">全部の期を集計しています…</div> */
.busy { display: inline-flex; align-items: center; gap: 10px; padding: 14px 0; color: var(--s-ink-mute); font-size: 13px; }
.busy::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2.5px solid var(--s-grey); border-top-color: var(--s-accent); animation: s-spin .8s linear infinite; }
@keyframes s-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .busy::before { animation-duration: 2s; } }

/* ---------------------------------------------------------------- 札 */
.badge {
  display: inline-block; padding: 1px 8px; border-radius: var(--s-radius-badge); font-size: 11px;
  background: #eee; color: var(--s-ink-sub); white-space: nowrap; line-height: 16px; vertical-align: middle;
}
.badge.todo, .badge.open, .badge.pending { background: var(--s-todo-bg); color: var(--s-todo-fg); }
.badge.ok, .badge.done, .badge.settled { background: var(--s-ok-bg); color: var(--s-ok-fg); }
.badge.info, .badge.running, .badge.matome { background: var(--s-info-bg); color: var(--s-info-fg); }
.badge.off, .badge.migrated { background: var(--s-off-bg); color: var(--s-off-fg); }
.badge.warn { background: var(--s-warn-bg); color: var(--s-warn-fg); font-weight: 700; }
.badge.accent { background: var(--s-tint); color: var(--s-deep); }
.badge.outline { background: #fff; border: 1px solid var(--s-grey); }
.count { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #e0335c; color: #fff; font-size: 11px; line-height: 18px; font-weight: 700; text-align: center; }

/* ---------------------------------------------------------------- 知らせ */
#flash, .flash {
  position: fixed; top: 14px; right: 14px; z-index: 2500; padding: 10px 18px;
  background: var(--s-deep); color: #fff; border-radius: var(--s-radius); font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
#flash.show, .flash.show { opacity: 1; }
#flash.err, .flash.err { background: var(--s-danger); }

/* ---------------------------------------------------------------- 開くメニュー */
.dropdown { position: relative; display: inline-block; }
.menu {
  position: absolute; top: 100%; left: 0; z-index: 30; min-width: 160px;
  background: #fff; border: 1px solid var(--s-grey); border-radius: var(--s-radius);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14); padding: 4px 0; max-height: 320px; overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu button, .menu a, .menu .item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  border: 0; border-radius: 0; background: none; text-align: left; cursor: pointer;
  padding: 6px 10px; font-size: 12px; line-height: 18px; color: var(--s-ink); text-decoration: none; white-space: nowrap;
}
.menu button:hover, .menu a:hover, .menu .item:hover, .menu .item.sel { background: var(--s-tint); }
.menu button:disabled { color: #bbb; background: none; opacity: 1; }
.menu .item b { font-weight: 700; }
.menu .item .sub { font-size: 11px; color: var(--s-ink-mute); }
.menu .head { padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--s-ink); border-bottom: 1px solid var(--s-faint); }
.menu .sep { border-top: 1px solid var(--s-faint); margin: 4px 0; }

/* ---------------------------------------------------------------- 進み具合 (長い処理) */
.prog { display: flex; align-items: center; gap: 10px; }
.prog-track { flex: 1; height: 8px; background: var(--s-tint); border-radius: 4px; overflow: hidden; position: relative; }
.prog-fill { display: block; height: 100%; width: 0; background: var(--s-accent); border-radius: 4px; transition: width .3s; }
.prog-txt { font-size: 12px; color: var(--s-ink-mute); white-space: nowrap; }
.prog.indet .prog-fill { width: 40%; position: absolute; animation: s-prog-indet 1.1s ease-in-out infinite; transition: none; }
@keyframes s-prog-indet { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .prog.indet .prog-fill { animation: none; width: 100%; } }

/* ---------------------------------------------------------------- スマホ */
@media (max-width: 500px) {
  /* iPhone は 16px 未満の欄に指を入れると画面を勝手に拡大する。上の指定と同じ形で並べる
     (`input` だけでは `input[type="text"]` に負けて文字欄だけ残る) */
  input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="url"],
  input[type="date"], input[type="month"], input[type="time"], input[type="number"], select, textarea {
    font-size: 16px;
  }
  .sheet { padding: 14px; }
  .modal { padding: 20px 10px; }
  .tabs .tab { min-width: 0; flex: 1; padding: 9px 10px; }
}