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

/* --- 土台（リセット・本文・リンク・数字・フォーカス） --- */

/* ===== FACT デザインシステム v5 ─────────────────────────────
     v4（フレンドリー・カラフル／白カード＋柔らかい影＋丸み）を、次の3つに合わせて作り直した。

     - Apple Human Interface Guidelines（Typography / Color）
       「書体やスタイルの種類は最小限にする。混ぜすぎると情報の階層が分からなくなり、
         読みにくく、一貫性が無く雑に作られた印象になる」
       「同じ色を違う意味に使わない」「色だけで区別・操作可否・重要情報を伝えない」
       「細いウェイトは避ける」
     - Material Design 3（Elevation）
       「面の区切りは既定では**色調の差**で表す」「影は少ないほど効く」
       段階は 0〜+3 が静止状態、+4/+5 はホバー等の操作中だけ。
     - デジタル庁デザインシステム β版（タイポグラフィ / カラー / 余白）
       「視認性・可読性の観点から基本的にフォントサイズは 16 CSS px 以上」
       公式のテキストスタイル一覧に **14px 未満は存在しない**（Dns/Oln の下限が14）。
       文字は**大きさに関わらず**常に 4.5:1 以上（大きな文字の例外規定を使わない）。
       部品の識別に必要な非テキストは 3:1 以上。余白の基準単位は **8 CSS px**。

     ## v4 を測った結果（作り直した理由）
       フォントサイズ **30種類**（12.5px・10.5px など半端な値を含む）／
       font-size 指定 **796件中 732件が 16px未満**／角丸 **14種類**／
       box-shadow **149箇所**（ほぼ全カード）／同一の斜めグラデーション **27箇所**。
       グレーは全て紫に寄っており（#A4A4BA 等）、メタ文字のコントラストは **2.44:1** しか無かった。

     ## v5 で決めたこと
       文字は6段だけ。余白は8の倍数だけ。角丸は2値だけ。
       **面の区切りは1pxの線**で表し、影は「浮いているもの」と「操作中」の2つだけに使う。
       グラデーションは使わない。色は「操作できるもの＝アクセント」「意味＝セマンティック」に限り、
       見出しや飾りには使わない。
     ------------------------------------------------------------ */
*{ margin:0; padding:0; box-sizing:border-box; }

html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

body{ background:var(--ground); color:var(--ink); font-family:var(--sans);
        font-size:var(--t-body); line-height:var(--lh-normal); }

a{ color:inherit; text-decoration:none; }

/* Apple「色だけで操作できることを伝えない」。本文中のリンクは下線で示す。 */
.content a:not([class]){ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* デジタル庁：フォーカスは必ず見える形で（この色は変えない） */
:focus-visible{ outline:3px solid #BF8B00; outline-offset:2px; }


/* --- 共通の外枠（サイドバー・上のバー・メイン・パンくず・帯） --- */

/* ===== シェル（サイドバー＋メイン） ===== */
.app{ display:flex; min-height:100vh; }

/* ===== サイドバー ===== */
.sidebar{ width:var(--side); flex-shrink:0; background:var(--surface); position:fixed; top:0; left:0; bottom:0; z-index:50; display:flex; flex-direction:column; border-right:1px solid var(--line); overflow-y:auto; scrollbar-width:thin; }

.sidebar::-webkit-scrollbar{ width:6px; }

.sidebar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }

/* ロゴの組み（ロックアップ）。
     タグラインは 和文「経営を、事実で。」→「Management Brain」→「Corporate Brain」
     （2026-10-16）と変わってきた。欧文にした時点で**字面が長くなっている**
     （"Corporate Brain" は "FACT" の約1.8倍の幅）。
     そのままだとタグラインが主役に見えるので、ワードマークを大きく字間を広げ、
     さらに**右肩上がりのチャート記号**を右に置いて、上下の行幅をそろえている。
     記号は予実のナビで使っているものと同じ形（FACT の中の記号の語彙をそろえる）。 */
.brand{ display:block; padding:var(--s3) var(--s3) var(--s1); }

/* グラデーションと発光シャドウは使わない（v4は同じ斜めグラデーションが27箇所あった） */
.brand .bn{ line-height:1.15; min-width:0; }

.brand .bname{ display:flex; align-items:center; gap:var(--s1);
                 font-size:26px; font-weight:700; letter-spacing:.30em; color:var(--ink); }

/* 右肩上がりの記号。ワードマークの右の余白を埋め、タグラインと行幅をそろえる。
     `letter-spacing` の最後の1字ぶんが右に余るので、negative margin で詰める。 */
.brand .mark{ width:22px; height:22px; flex-shrink:0; margin-left:-.22em; color:var(--accent); }

.brand .mark svg{ width:100%; height:100%; display:block; stroke-width:1.7; }

/* タグラインは v5 の下限 14px。小さくして幅を詰めるのではなく、太さと色で主従を付ける */
.brand .btag{ font-size:var(--t-dense); font-weight:500; letter-spacing:0; color:var(--ink-3);
                white-space:nowrap; margin-top:2px; }

/* カテゴリーの帯（システム開発者の指示 2026-10-02）。
     15項目が1列に並んでいて、どれが近い機能か分からなかった。
     **見出しに薄い帯を敷き、グループの間に余白を取る**ことで塊が見えるようにする。
     v5 の作法どおり、影は使わず面の色の差と余白だけで区切る。 */
.side-sec{ font-size:var(--t-dense); font-weight:700; letter-spacing:.04em; color:var(--ink-3);
             background:var(--surface-2); border-radius:var(--radius-sm);
             padding:5px var(--s1); margin:0 0 var(--s0); }

.side-grp{ display:flex; flex-direction:column; gap:2px; }

/* グループ間の余白。見出しの帯があるので、間は詰めても塊は分かれて見える。
     15項目＋5見出しなので、ここを広く取るとサイドバーがすぐスクロールする */
.side-grp + .side-grp{ margin-top:var(--s2); }

.side-nav{ padding:var(--s1) var(--s2) var(--s2); display:flex; flex-direction:column; }

.nav-item{ display:flex; align-items:center; gap:var(--s1); padding:8px var(--s1); border-radius:var(--radius); color:var(--ink-2); font-size:var(--t-body); font-weight:500; position:relative; transition:background .15s ease, color .15s ease; }

.nav-item svg{ width:20px; height:20px; flex-shrink:0; stroke-width:1.7; }

/* 本文中の線画アイコン（Blade の icon ディレクティブが出す svg）。
     文字サイズに連動させ、ベースラインに合わせる。
     px固定にすると 16px と 14px の行で高さが揃わない。 */
.ico{ width:1.15em; height:1.15em; flex-shrink:0; vertical-align:-.19em; }

.ico.lg{ width:1.4em; height:1.4em; vertical-align:-.3em; }

/* flex の行では vertical-align が効かないので打ち消す */
.btn .ico, .btn-save .ico, .pbtn .ico, .chip .ico, .nav-item .ico{ vertical-align:0; }

.nav-item:hover{ background:var(--surface-2); color:var(--ink); }

/* 現在地は色だけでなく**太字と左の罫**でも示す（Apple「色だけで区別しない」） */
.nav-item.on{ background:var(--accent-soft); color:var(--accent); font-weight:700; }

.nav-item.on::before{ content:""; position:absolute; left:calc(var(--s2) * -1); top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }

.nav-item .lbl{ flex:1; }

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

/* ===== メイン ===== */
.main{ flex:1; margin-left:var(--side); display:flex; flex-direction:column; min-width:0; }

.topbar{ height:var(--topbar); background:var(--surface); position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:var(--s2); padding:0 var(--s4); border-bottom:1px solid var(--line); }

.hamb{ display:none; width:40px; height:40px; border:none; background:var(--surface-2); border-radius:var(--radius); color:var(--ink-2); cursor:pointer; align-items:center; justify-content:center; }

.top-title{ font-size:var(--t-body); font-weight:700; color:var(--ink); }

.top-right{ margin-left:auto; display:flex; align-items:center; gap:var(--s1); min-width:0; }

.msearch{ background:var(--surface); border:1px solid var(--line-strong); padding:9px 12px; font-size:var(--t-dense); color:var(--ink); font-family:var(--sans); width:220px; min-width:0; border-radius:var(--radius); }

.msearch::placeholder{ color:var(--ink-3); }

.iconbtn{ width:40px; height:40px; border-radius:var(--radius); background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--ink-2); position:relative; }

.iconbtn:hover{ color:var(--accent); }

.iconbtn .bdot{ position:absolute; top:5px; right:5px; min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-pill); background:var(--neg); color:#fff; font-size:var(--t-dense); font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid #fff; font-family:var(--mono); }

.stamp{ font-size:var(--t-dense); color:var(--ink-3); text-align:right; font-family:var(--mono); line-height:1.4; }

.stamp b{ color:var(--ink-2); }

/* パンくず（2026-10-17）。どこにいるか・どこへ戻れるかを常に出す */
.crumbs{ display:flex; align-items:center; gap:var(--s1); flex-wrap:wrap;
       padding:10px var(--s4) 0; font-size:var(--t-dense); color:var(--ink-3); }

.crumbs a{ color:var(--ink-3); text-decoration:none; }

.crumbs a:hover{ color:var(--accent); text-decoration:underline; }

.crumbs .sep{ color:var(--line-strong); }

.crumbs .here{ color:var(--ink-2); font-weight:700; }

.crumbs .back{ margin-left:auto; font-weight:700; color:var(--accent);
       background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
       padding:5px 12px; white-space:nowrap; }

.crumbs .back:hover{ background:var(--accent-soft); text-decoration:none; }

@media (max-width:700px){
  .crumbs{ padding:10px var(--s2) 0; }
  .crumbs .back{ margin-left:0; width:100%; text-align:center; }
}

/* 期の進み具合の帯（2026-10-16）。全ページの上。ヘッダーには数字を足さない */
.qbar{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
       padding:7px var(--s4); background:var(--surface); border-bottom:1px solid var(--line);
       font-size:var(--t-dense); color:var(--ink-3); text-decoration:none; }

.qbar:hover{ background:var(--surface-2); }

.qb-t{ font-weight:700; color:var(--ink-2); white-space:nowrap; }

.qb-bar{ flex:1; min-width:120px; height:6px; border-radius:999px;
       background:var(--surface-2); overflow:hidden; }

.qb-bar i{ display:block; height:100%; background:var(--accent); border-radius:999px; }

.qbar.is-near .qb-bar i{ background:var(--warn); }

.qb-n{ white-space:nowrap; color:var(--ink-2); }

.qb-n b{ font-family:var(--mono); font-size:var(--t-body); color:var(--ink); }

.qbar.is-near .qb-n b{ color:var(--warn); }

.qb-w{ color:var(--warn); margin-left:4px; }

.qb-d{ white-space:nowrap; }

@media (max-width:700px){
  .qbar{ padding:7px var(--s2); }
  .qb-d{ display:none; }
}

/* 見え方の確認中の帯（2026-10-17）。★色だけで伝えず、文字でも書く */
.pvbar{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
       padding:9px var(--s3); background:var(--amber-soft); color:var(--ink);
       border-bottom:2px solid var(--warn); font-size:var(--t-dense); }

.pvbar .pv-t{ font-weight:800; }

.pvbar .pv-n{ color:var(--ink-2); }

.pvbar form{ margin-left:auto; }

.pvbar button{ border:0; border-radius:var(--radius); padding:6px 14px; cursor:pointer;
       background:var(--ink); color:#fff; font-size:var(--t-dense); font-weight:700;
       font-family:inherit; }

.whoami{ display:flex; align-items:center; gap:var(--s1); padding-left:var(--s0); }

.whoami .badge{ 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); }

/* 長い部署名（例：医療案件チーム）でマストヘッドが折り返していたので、1行に収めて省略する。
     ★`.whoami > div` と書いていたが、`.whoami` の直下に div は**1つも無い**（子は a と form）。
       3箇所とも何にも当たっておらず、狭い画面で氏名と部署が隠れないままだった
       （2026-10-20、MARK へ書き出した見本を 375px で見て気づいた）。 */
.whoami > a:not(.badge):not(.logout-btn){ min-width:0; max-width:170px; }

.whoami .nm, .whoami .rl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.whoami .nm{ font-size:var(--t-dense); font-weight:700; }

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

.top-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.logout-btn{ background:none; border:none; color:var(--ink-2); font-size:var(--t-dense); font-weight:600; padding:var(--s1); border-radius:var(--radius); cursor:pointer; font-family:var(--sans); white-space:nowrap; text-decoration:underline; text-underline-offset:2px; }

.logout-btn:hover{ background:var(--surface-2); color:var(--neg); }

.content{ flex:1; padding:var(--s4) 0 var(--s6); }

.content .wrap, .wrap{ max-width:1320px; margin:0 auto; padding:0 var(--s4); }

.scrim{ display:none; position:fixed; inset:0; background:rgba(20,22,26,.42); z-index:45; }

.prov{ margin-top:var(--s3); }

.prov .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s1); padding:var(--s1) var(--s4) var(--s5); font-family:var(--mono); font-size:var(--t-dense); color:var(--ink-3); }

/*
   * ★マストヘッドのブレークポイントは**サイドバーのぶんを引いて考える**。
   *   サイドバーが出ている間、本体の幅は「ウィンドウ幅 − 272px」。
   *   ウィンドウ 1070px でも本体は 798px しかなく、
   *   900px 基準の指定では効かないまま**横に溢れていた**（長い部署名で特に）。
   */
@media (max-width:1240px){
  .stamp{ display:none; }
  .msearch{ width:150px; }
  .whoami > a:not(.badge):not(.logout-btn){ max-width:120px; }
}

@media (max-width:1120px){
  .msearch{ display:none; }
}

@media (max-width:1024px){
  .sidebar{ transform:translateX(-100%); transition:transform .22s ease; }
  .sidebar.open{ transform:none; box-shadow:var(--shadow-over); }
  .main{ margin-left:0; }
  .hamb{ display:flex; }
  .scrim.show{ display:block; }
}

@media (max-width:900px){
  .wrap{ padding:0 var(--s2); }
  .msearch{ display:none; }
}

/* 狭幅でマストヘッドが横にはみ出していた（v4から続いていた不具合）。
     flex の子は既定で min-width:auto のため中身の幅ぶん縮まない。明示的に縮める。 */
@media (max-width:900px){
  .topbar{ padding:0 var(--s2); gap:var(--s1); }
  .top-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .top-right{ min-width:0; }
  .whoami > a:not(.badge):not(.logout-btn){ display:none; }
}

/* ★狭い画面でも期の進み具合は出す（2026-10-16）。日付だけ畳む */
@media (max-width:560px){
  .stamp{ font-size:var(--t-dense); }
  .stamp b{ display:none; }
}