/* FACT デザインシステム v5 — 部品（★共通になっているぶんだけ）
 *
 * FACT から書き出したものです。**正は FACT の resources/views/layouts/fact.blade.php**。
 * このファイルを直しても FACT は変わりません。FACT 側の変更は、書き出し直して受け取ってください。
 *
 * 書き出し元：FACT コミット 3f73c5c（2026-10-20）
 * 書き出し　：php scripts/export_design_system.php
 */

/* ★これは依頼 §3 No.3 の部品の**一部**です。
 * ボタン・入力欄・選択・日付・チェックボックス・タブ・カード・確認のダイアログ・
 * 空の状態の表示は、FACT ではまだ共通化されておらず、画面ごとの <style> に
 * 散っています（122ファイル・4,741行）。README.md の「3. 入っていないもの」を見てください。
 */

/* ===== ページ見出し ===== */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s2); margin-bottom:var(--s3); flex-wrap:wrap; }

/* アクセント色は「操作できるもの」に予約したので、見出しの上の小ラベルはメタ色にする。
     装飾の横棒（::before）も外した。 */
.eyebrow{ font-family:var(--mono); font-size:var(--t-dense); letter-spacing:.04em; color:var(--ink-3); display:flex; align-items:center; gap:var(--s0); }

.ptitle{ font-size:var(--t-display); font-weight:700; margin-top:var(--s0); letter-spacing:-.01em; line-height:var(--lh-tight); }

.pnote{ font-size:var(--t-body); color:var(--ink-2); margin-top:var(--s1); line-height:var(--lh-read); }

/* ===== 汎用：サブナビ／チップ ===== */
  /* デモ用の仮データの帯。見落とすと作り話の数字を本物として読むので、強く出す。 */
.demobar{ display:flex; align-items:flex-start; gap:var(--s1); background:var(--warn); color:#fff;
            border-radius:var(--radius); padding:12px var(--s2); margin-bottom:var(--s3);
            font-size:var(--t-body); line-height:1.7; }

.demobar svg{ width:20px; height:20px; flex-shrink:0; margin-top:2px; }

.demobar b{ font-weight:700; }

/* 畳んだサブナビ（2026-10-16）。毎日見るものと、月に1回入れるものを分ける */
.bsubmore{ margin:calc(var(--s3) * -1 + 2px) 0 var(--s3); }

.bsubmore > summary{ display:inline-flex; align-items:center; gap:6px; cursor:pointer;
       font-size:var(--t-dense); font-weight:700; color:var(--ink-3); list-style:none;
       padding:6px 12px; border-radius:var(--radius); background:var(--surface-2); }

.bsubmore > summary::-webkit-details-marker{ display:none; }

.bsubmore > summary::after{ content:'▾'; }

.bsubmore[open] > summary::after{ content:'▴'; }

.bsubmore > summary:hover{ color:var(--accent); }

.bsubmore .bsubnav{ margin-top:var(--s1); }

.bsubnav{ display:flex; gap:var(--s1); flex-wrap:wrap; align-items:center; margin-bottom:var(--s3); }

.bsubnav a{ display:inline-flex; align-items:center; gap:6px; background:var(--surface); color:var(--ink-2); border:1px solid var(--line); padding:9px var(--s2); font-size:var(--t-dense); font-weight:600; border-radius:var(--radius); white-space:nowrap; transition:all .15s ease; }

.bsubnav a .ico{ vertical-align:0; color:var(--ink-3); }

.bsubnav a:hover .ico{ color:inherit; }

.bsubnav a.on .ico{ color:#fff; }

.bsubnav a:hover{ border-color:var(--line-strong); color:var(--ink); }

.bsubnav a.on{ background:var(--accent); color:#fff; border-color:var(--accent); }

.chips{ display:flex; gap:var(--s1); flex-wrap:wrap; margin-bottom:var(--s2); }

.chip{ border:1px solid var(--line); background:var(--surface); box-shadow:none; padding:7px var(--s2); font-size:var(--t-dense); color:var(--ink-2); cursor:pointer; border-radius:var(--radius); }

.chip.on{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700; }

/* ===== 汎用：統計ストリップ ===== */
.strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); margin-bottom:var(--s4); }

.stat{ background:var(--surface); border-radius:var(--radius); border:1px solid var(--line); box-shadow:none; padding:var(--s3); }

.stat .k{ font-size:var(--t-dense); color:var(--ink-2); font-weight:600; }

.stat .v{ font-family:var(--mono); font-size:var(--t-title); font-weight:700; margin-top:var(--s1); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

.stat .v .u{ font-size:var(--t-dense); color:var(--ink-3); font-weight:400; margin-left:2px; }

.stat .s{ font-size:var(--t-dense); color:var(--ink-3); margin-top:var(--s0); font-family:var(--mono); }

/* ===== 汎用：テーブル ===== */
  /* ★`overflow:hidden` にしない。広い表が**横スクロールもできずに切れる**。
     `overflow-x:auto` にすると overflow-y も auto になり、見出しの position:sticky が
     ビューポートではなくこの枠に対して効いてしまうので、見出しは静的に戻す（下の .tbl th）。
     見出しが固定されないことより、**データが見えないことのほうが悪い**。 */
.tbl-wrap{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:none; overflow-x:auto; }

.tbl{ width:100%; border-collapse:collapse; font-size:var(--t-dense); }

/* ヘッダーはスクロール追従でマストヘッド直下に固定。境界線は box-shadow で描く（border-collapse対策） */
  /* 横に続きがある表は、そうと分かるようにする。
     macOS は普段スクロールバーを隠すので、何もしないと「切れている」に見える。 */
.tbl-wrap.scrollable{ position:relative; }

.tbl-wrap.scrollable::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:28px;
      pointer-events:none; background:linear-gradient(to right, rgba(255,255,255,0), var(--surface)); }

.tbl-wrap.scrollable.at-end::after{ opacity:0; }

.tbl-scroll-hint{ display:flex; align-items:center; gap:5px; font-size:var(--t-dense); color:var(--ink-3); margin-top:6px; }

.tbl th{ text-align:left; padding:var(--s2); font-size:var(--t-dense); color:var(--ink-2); font-weight:700; letter-spacing:.02em; background:var(--surface-2); box-shadow:inset 0 -1px 0 var(--line); white-space:nowrap; }

.tbl td{ padding:var(--s2); border-bottom:1px solid var(--line); white-space:nowrap; }

.tbl tr:last-child td{ border-bottom:none; }

.tbl tr:hover td{ background:var(--surface-2); }

.tbl tr.clickable{ cursor:pointer; }

.tbl .n{ font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; }

.person{ display:flex; align-items:center; gap:var(--s1); }

.avatar{ width:36px; height:36px; border-radius:var(--radius-pill); background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--t-dense); flex-shrink:0; }

.sub{ font-size:var(--t-dense); color:var(--ink-3); }

.tag{ font-size:var(--t-dense); font-weight:700; padding:2px var(--s1); border-radius:var(--radius-sm); font-family:var(--mono); }

.tag.emp{ background:var(--accent-soft); color:var(--accent); }

.tag.part{ background:var(--warn-soft); color:var(--warn); }

.rk{ display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:24px; padding:0 var(--s1); border-radius:var(--radius-sm); font-size:var(--t-dense); font-weight:700; color:#fff; font-family:var(--mono); }

/* ページネーション */
.pager{ display:flex; justify-content:center; align-items:center; gap:var(--s0); margin-top:var(--s3); flex-wrap:wrap; }

.pager a, .pager span{ min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; padding:0 var(--s1); border-radius:var(--radius); font-size:var(--t-dense); font-family:var(--mono); color:var(--ink-2); background:var(--surface); border:1px solid var(--line); box-shadow:none; text-decoration:none; transition:color .12s; }

.pager a:hover{ color:var(--accent); border-color:var(--line-strong); }

.pager .cur{ background:var(--accent); color:#fff; font-weight:700; border-color:var(--accent); }

.pager .disabled{ opacity:.4; pointer-events:none; }

.pager .info{ background:none; border:none; color:var(--ink-3); font-size:var(--t-dense); margin-left:var(--s0); }

@media (max-width:900px){
  .strip{ grid-template-columns:repeat(2,1fr); }
}

/* ★狭い画面でも期の進み具合は出す（2026-10-16）。日付だけ畳む */
@media (max-width:560px){
  .strip{ grid-template-columns:1fr; }
}