/* FACT デザインシステム v5 — 追加の部品（MARKが作り、FACTに渡すもの）
 *
 * 作成：MARK（2026-10-20）。FACT の書き出し（コミット 3f73c5c）の tokens.css の上に作っています。
 * 読み込む順番：tokens.css → chrome.css → components.css（FACT）→ このファイル
 *
 * 守っていること（FACT README §4 の決まり事）
 *  - 色はトークンだけ。新しい色を作らない。アクセントは「操作できるもの」にだけ使う
 *  - 面の区切りは 1px の線。影は浮いているもの（ダイアログ）の --shadow-over だけ
 *  - 角丸は --radius（8px）と --radius-sm（4px）だけ。余白は 8 の倍数（--s1〜）
 *  - 文字は 14px 以上（--t-dense）。読ませる文は 16px（--t-body）
 *  - 色だけで伝えない。エラー・状態は必ず文字（とアイコン）を添える
 *  - フォーカスの枠は FACT の :focus-visible（3px #BF8B00）をそのまま使う。ここでは上書きしない
 *  - グラデーションは使わない
 *  - 押せる部品の高さは 40px 以上（FACT のページ送りと同じ）
 */

/* =========================================================
 * 1. ボタン
 *    主：その画面でいちばん大事な操作（1画面に1つ）
 *    副：ほかの操作
 *    危：取り消し・削除など、戻せない操作
 *    文字だけ：表の中・カードの右上など、目立たせたくない操作
 * ========================================================= */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s1);
      min-height:40px; padding:0 var(--s2); border-radius:var(--radius);
      font:inherit; font-size:var(--t-dense); font-weight:700; line-height:1; white-space:nowrap;
      border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
      cursor:pointer; text-decoration:none; transition:background .12s, border-color .12s, color .12s; }
.btn:hover{ background:var(--surface-2); }
.btn .ico, .btn svg{ width:18px; height:18px; flex-shrink:0; }

.btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-d); border-color:var(--accent-d); }

.btn-danger{ background:var(--surface); border-color:var(--neg); color:var(--neg); }
.btn-danger:hover{ background:var(--neg-soft); }
/* 確認のダイアログの中で、戻せない操作を確定するときだけ塗る */
.btn-danger.is-confirm{ background:var(--neg); color:#fff; }
/* 新しい色を作らないので、ホバーは「操作中」の影で示す */
.btn-danger.is-confirm:hover{ background:var(--neg); box-shadow:var(--shadow-act); }

.btn-text{ border-color:transparent; background:transparent; color:var(--accent); padding:0 var(--s1); }
.btn-text:hover{ background:var(--accent-soft); }

/* 押せないとき。色を薄くするだけでなく、押せない形（cursor）にする。理由はそばに文字で書く */
.btn:disabled, .btn[aria-disabled="true"]{ background:var(--surface-2); border-color:var(--line); color:var(--ink-3); cursor:not-allowed; }

.btn-row{ display:flex; gap:var(--s1); flex-wrap:wrap; align-items:center; }
.btn-row.end{ justify-content:flex-end; }

/* =========================================================
 * 2. 入力欄・選択・日付・複数行
 *    1つの項目は .field で囲み、見出し（label）・入力・説明・エラーを縦に並べる
 * ========================================================= */
.field{ display:flex; flex-direction:column; gap:var(--s0); margin-bottom:var(--s3); }
.field > label, .field .label{ font-size:var(--t-dense); font-weight:700; color:var(--ink); }
/* 必須は「*」ではなく文字で書く（記号だけだと意味が伝わらない） */
.field .req{ margin-left:var(--s0); font-size:var(--t-dense); font-weight:700; color:var(--neg); }
.field .help{ font-size:var(--t-dense); color:var(--ink-3); line-height:var(--lh-normal); }

.input, .select, .textarea, .field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="tel"], .field input[type="url"], .field input[type="date"],
.field input[type="number"], .field input[type="search"], .field select, .field textarea{
      width:100%; min-height:40px; padding:var(--s1) 12px; border-radius:var(--radius);
      border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
      font:inherit; font-size:var(--t-body); line-height:var(--lh-normal); }
.textarea, .field textarea{ min-height:120px; resize:vertical; line-height:var(--lh-read); }
/* 数字と日付は等幅で桁をそろえる */
.field input[type="number"], .field input[type="date"], .input.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.field input[type="number"], .input.num{ text-align:right; }

.select, .field select{ appearance:none; padding-right:40px;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345484E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right 12px center; background-size:18px; }

.field :is(input, select, textarea):disabled, .input:disabled, .select:disabled, .textarea:disabled{
      background:var(--surface-2); color:var(--ink-3); cursor:not-allowed; }
.field :is(input, select, textarea)[readonly]{ background:var(--surface-2); }

/* エラー：枠の色＋文字（＋アイコン）。色だけにしない。aria-invalid と aria-describedby をセットで使う */
.field :is(input, select, textarea)[aria-invalid="true"], .is-invalid{ border-color:var(--neg); border-width:2px; padding-left:11px; }
.field .err{ display:flex; align-items:flex-start; gap:var(--s0); font-size:var(--t-dense); font-weight:700; color:var(--neg); }
.field .err::before{ content:"!"; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
      width:18px; height:18px; margin-top:1px; border-radius:var(--radius-pill); background:var(--neg); color:#fff; font-size:12px; }

/* 横に並べる（日付の範囲など） */
.field-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--s2); }

/* =========================================================
 * 3. チェックボックス・ラジオ
 *    文字ごと押せるように label で包む。押せる範囲は高さ 40px
 * ========================================================= */
.check{ display:flex; align-items:center; gap:var(--s1); min-height:40px; font-size:var(--t-body); color:var(--ink); cursor:pointer; }
.check input{ width:20px; height:20px; margin:0; flex-shrink:0; accent-color:var(--accent); cursor:pointer; }
.check .sub{ margin-left:var(--s0); }
.check:has(input:disabled){ color:var(--ink-3); cursor:not-allowed; }
.check-list{ display:flex; flex-direction:column; gap:0; }
.check-list.inline{ flex-direction:row; flex-wrap:wrap; gap:var(--s3); }
fieldset.field{ border:0; padding:0; min-width:0; }
fieldset.field > legend{ padding:0; margin-bottom:var(--s0); font-size:var(--t-dense); font-weight:700; color:var(--ink); }

/* =========================================================
 * 4. タブ
 *    role="tablist" / role="tab" / role="tabpanel" と aria-selected を使う（js/tabs.js で左右キー移動）
 *    いまのタブ：色＋太字＋下の罫（色だけにしない。FACT の現在地の決まりと同じ）
 * ========================================================= */
.tabs{ display:flex; gap:var(--s0); border-bottom:1px solid var(--line); margin-bottom:var(--s3); overflow-x:auto; }
.tab{ position:relative; min-height:44px; padding:0 var(--s2); border:0; background:transparent;
      font:inherit; font-size:var(--t-dense); font-weight:600; color:var(--ink-2); white-space:nowrap; cursor:pointer;
      display:inline-flex; align-items:center; gap:var(--s1); text-decoration:none; }
.tab:hover{ color:var(--ink); background:var(--surface-2); }
.tab[aria-selected="true"], .tab.on{ color:var(--accent); font-weight:700; }
.tab[aria-selected="true"]::after, .tab.on::after{ content:""; position:absolute; left:var(--s1); right:var(--s1); bottom:-1px; height:3px; background:var(--accent); border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
/* タブの件数（担当者タブのタスク数など）。数字は等幅 */
.tab .cnt{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--t-dense); color:var(--ink-3); background:var(--surface-2); border-radius:var(--radius-pill); padding:0 var(--s1); }
.tab[aria-selected="true"] .cnt, .tab.on .cnt{ color:var(--accent); background:var(--accent-soft); }
[role="tabpanel"][hidden]{ display:none; }

/* =========================================================
 * 5. カード
 *    面の区切りは 1px の線（影ではない）。見出しは --t-head
 * ========================================================= */
.card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2); padding:var(--s2) var(--s3); border-bottom:1px solid var(--line); }
/* 長い社名でもバッジを押し出さない。熟語で折れなければ、どこで折ってもよい（はみ出すよりよい） */
.card-title{ min-width:0; font-size:var(--t-head); font-weight:700; line-height:var(--lh-tight); overflow-wrap:anywhere; }
.card-body{ flex:1; padding:var(--s3); font-size:var(--t-body); line-height:var(--lh-read); }
.card-foot{ padding:var(--s2) var(--s3); border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 var(--radius) var(--radius); }
.card + .card{ margin-top:var(--s2); }
.card-grid > .card + .card{ margin-top:0; }
.card-head .tag{ white-space:nowrap; flex-shrink:0; }
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--s2); }

/* =========================================================
 * 6. 確認のダイアログ
 *    ブラウザの <dialog> を使う（Esc で閉じる・フォーカスが中に閉じ込められる）。js/confirm.js
 *    ボタンは「はい／いいえ」にしない。押すと何が起きるかを書く（例：「取り消す」「やめる」）
 * ========================================================= */
/* FACT の chrome.css は全要素の margin を 0 にしている。<dialog> の画面中央寄せはブラウザ既定の margin:auto に頼るので、戻す */
.dialog{ margin:auto; width:min(520px, calc(100vw - var(--s4))); padding:0; border:0; border-radius:var(--radius);
         background:var(--surface); color:var(--ink); box-shadow:var(--shadow-over); }
/* 背景の暗さは FACT のスクリム（.scrim）と同じ値 */
.dialog::backdrop{ background:rgba(20,22,26,.42); }
.dialog-head{ padding:var(--s3) var(--s3) 0; }
.dialog-title{ font-size:var(--t-head); font-weight:700; line-height:var(--lh-tight); }
.dialog-body{ padding:var(--s2) var(--s3) var(--s3); font-size:var(--t-body); line-height:var(--lh-read); color:var(--ink-2); }
.dialog-body .field{ margin-bottom:0; margin-top:var(--s2); }
.dialog-foot{ display:flex; justify-content:flex-end; gap:var(--s1); flex-wrap:wrap; padding:var(--s2) var(--s3); border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 var(--radius) var(--radius); }

/* =========================================================
 * 7. 空の状態の表示
 *    「何も無い」だけで終わらせず、なぜ無いか・次に何をすればよいかを書く
 * ========================================================= */
.empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s1);
        padding:var(--s5) var(--s3); background:var(--surface); border:1px dashed var(--line-strong); border-radius:var(--radius); }
.empty .ico, .empty > svg{ width:32px; height:32px; color:var(--ink-3); }
.empty-title{ font-size:var(--t-lead); font-weight:700; color:var(--ink); }
.empty-text{ max-width:36em; font-size:var(--t-body); color:var(--ink-2); line-height:var(--lh-read); }
.empty .btn-row{ margin-top:var(--s1); justify-content:center; }
/* 表の中で使うとき */
.tbl td.empty-cell{ padding:var(--s4) var(--s2); text-align:center; color:var(--ink-2); white-space:normal; }

/* =========================================================
 * 8. 通知・エラーの表示（画面の上に出す帯）
 *    種類は4つ：お知らせ・完了・注意・エラー。色＋見出しの文字＋アイコンで伝える
 * ========================================================= */
.alert{ display:flex; gap:var(--s1); align-items:flex-start; padding:12px var(--s2); margin-bottom:var(--s3);
        border:1px solid var(--line-strong); border-left-width:4px; border-radius:var(--radius);
        background:var(--surface); font-size:var(--t-body); line-height:var(--lh-normal); color:var(--ink); }
.alert > svg, .alert .ico{ width:20px; height:20px; flex-shrink:0; margin-top:2px; }
.alert-title{ font-weight:700; }
.alert ul{ margin:var(--s0) 0 0; padding-left:1.2em; }
.alert.info{ border-color:var(--accent); background:var(--accent-soft); }
.alert.info > svg{ color:var(--accent); }
.alert.ok{ border-color:var(--pos); background:var(--pos-soft); }
.alert.ok > svg{ color:var(--pos); }
.alert.warn{ border-color:var(--warn); background:var(--warn-soft); }
.alert.warn > svg{ color:var(--warn); }
.alert.err{ border-color:var(--neg); background:var(--neg-soft); }
.alert.err > svg{ color:var(--neg); }

/* =========================================================
 * 9. 表の並べ替え
 *    見出しの中にボタン（またはリンク）を置き、th に aria-sort を付ける。
 *    並べ替えの向きは矢印＋読み上げ用の文字で伝える。サーバー側で並べ替えるならリンクでよい
 *    （js/table-sort.js はその場で並べ替える場合だけ使う）
 * ========================================================= */
.tbl th.sortable{ padding:0; }
.tbl th .sort{ display:flex; align-items:center; gap:var(--s0); width:100%; min-height:48px; padding:0 var(--s2);
               border:0; background:transparent; font:inherit; font-size:var(--t-dense); font-weight:700; color:var(--ink-2);
               letter-spacing:.02em; text-align:left; cursor:pointer; text-decoration:none; white-space:nowrap; }
.tbl th.n .sort{ justify-content:flex-end; }
.tbl th .sort:hover{ color:var(--accent); }
.tbl th .sort::after{ content:"⇅"; font-size:var(--t-dense); color:var(--ink-3); }
.tbl th[aria-sort="ascending"] .sort, .tbl th[aria-sort="descending"] .sort{ color:var(--accent); }
.tbl th[aria-sort="ascending"] .sort::after{ content:"↑"; color:var(--accent); }
.tbl th[aria-sort="descending"] .sort::after{ content:"↓"; color:var(--accent); }

/* 読み上げ専用の文字（見た目には出さない） */
.vh{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (max-width:700px){
  .card-head, .card-body, .card-foot{ padding-left:var(--s2); padding-right:var(--s2); }
  .btn-row.end{ justify-content:stretch; }
  .btn-row.end .btn{ flex:1 1 auto; }
  .dialog-foot .btn{ flex:1 1 auto; }
}

/* 日本語の文を、熟語の途中で折り返さない（「残/り」「株式/会社」のような折り返しを防ぐ）。
 * <html lang="ja"> が前提。対応していないブラウザでは通常の折り返しになるだけで、崩れない */
.card-title, .card-body, .dialog-title, .dialog-body, .empty-title, .empty-text,
.alert, .field .help, .field .err, .tbl td.empty-cell{ word-break:auto-phrase; }