/* ============================================================
   東央技研 デザイントークン v1 (2026-06-10 UIリスキンB案 R1)
   目的: 角丸7種/文字15種/状態色3方言の乱立を、この1枚の変数に収束させる。
   使い方: 新規・改修コードは生値でなく var(--t-*) を使う。既存の生値は
   Wave毎に置換していく(実測ゲート: _v84_uiaudit.py の種類数が減ること)。
   ============================================================ */
:root{
  /* ブランド */
  --t-blue:#1a73e8;          /* 東央ブルー(アクセント) */
  --t-blue-deep:#1557b0;     /* テキスト用濃青(WCAG AA on #f6f8fc) */
  --t-blue-soft:rgba(26,115,232,0.10);
  --t-ink:#202124;           /* 見出し・本文 */
  --t-sub:#5f6368;           /* 補助テキスト */
  --t-line:rgba(0,0,0,0.08); /* 罫線 */
  --t-bg:#f5f7fa;            /* アプリ背景 */
  --t-card:#ffffff;          /* カード面 */
  --t-danger:#d32f2f;
  --t-warn:#f57c00;
  --t-ok:#2e7d32;

  /* 角丸: 3段だけ。これ以外を新規に書かない */
  --t-r-sm:8px;              /* 入力・小ボタン・チップ */
  --t-r-md:12px;             /* カード・モーダル */
  --t-r-full:999px;          /* ピル・バッジ */

  /* 文字: 6段スケール */
  --t-fs-xs:11px;            /* バッジ・補足 */
  --t-fs-sm:12.5px;          /* チップ・メタ */
  --t-fs-md:14px;            /* 本文・ボタン */
  --t-fs-lg:16px;            /* 小見出し */
  --t-fs-xl:18px;            /* 画面見出し */
  --t-fs-num:22px;           /* 統計数値 */

  /* 余白: 4ptグリッド */
  --t-sp-1:4px; --t-sp-2:8px; --t-sp-3:12px; --t-sp-4:16px; --t-sp-5:24px;

  /* 影: 2段だけ */
  --t-sh-1:0 1px 4px rgba(0,0,0,0.05);
  --t-sh-2:0 8px 24px rgba(0,0,0,0.12);

  /* モーション */
  --t-ease:cubic-bezier(.2,.7,.3,1);
  --t-dur:150ms;

  /* 案件8状態の統一辞書 (projects列/pinboard縁/taskpanel/カレンダー全部これを参照させる) */
  --t-st-inquiry:#7c4dff;    /* 依頼・相談 */
  --t-st-survey:#ab47bc;     /* 現場調査 */
  --t-st-estimate:#1a73e8;   /* 見積 */
  --t-st-order:#00897b;      /* 発注待ち */
  --t-st-pre:#039be5;        /* 着工前 */
  --t-st-doing:#43a047;      /* 施工中 */
  --t-st-done:#2e7d32;       /* 完工 */
  --t-st-lost:#9e9e9e;       /* 失注・中止 */

  /* タスク状態 */
  --t-tk-pending:#ff9800; --t-tk-doing:#1a73e8; --t-tk-completed:#4caf50;
  --t-tk-approved:#00c853; --t-tk-rejected:#d32f2f;
}

/* タッチ端末ではキーボードショートカットヒント(kbd)を出さない (board ⇧1〜4 等) */
@media (hover:none), (pointer:coarse){
  kbd{ display:none !important; }
}

/* 0件バッジは出さない(情報ゼロの赤丸/灰丸はノイズ) — JSが is-zero を付与 */
.is-zero{ display:none !important; }

/* ---- 共通部品スケルトン (Wave2以降で各アプリが置換採用) ---- */
.t-btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px;
  border-radius:var(--t-r-sm); border:1px solid var(--t-line); background:var(--t-card);
  color:var(--t-blue-deep); font-size:var(--t-fs-sm); font-weight:700; cursor:pointer;
  text-decoration:none; transition:background var(--t-dur) var(--t-ease); }
.t-btn:hover{ background:var(--t-blue-soft); }
.t-btn-primary{ background:var(--t-blue); border-color:var(--t-blue); color:#fff; }
.t-btn-primary:hover{ background:var(--t-blue-deep); }
.t-chip{ display:inline-flex; align-items:center; gap:5px; padding:6px 12px;
  border-radius:var(--t-r-full); border:1px solid var(--t-line); background:var(--t-card);
  color:var(--t-sub); font-size:var(--t-fs-sm); font-weight:700; cursor:pointer; }
.t-chip.is-active{ background:var(--t-blue); border-color:var(--t-blue); color:#fff; }
.t-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  padding:0 6px; border-radius:var(--t-r-full); background:var(--t-danger); color:#fff;
  font-size:10px; font-weight:800; }
.t-card{ background:var(--t-card); border:1px solid var(--t-line);
  border-radius:var(--t-r-md); box-shadow:var(--t-sh-1); }

/* ---- W2 (2026-06-10): 統一フォーカスリング(キーボード操作時のみ=マウスでは出ない) ---- */
:where(a,button,input,select,textarea,[role="tab"],[tabindex]):focus-visible{
  outline:2px solid var(--t-blue); outline-offset:2px;
}

/* ---- W4 (2026-06-10): 案件カンバンの密度 — 0件列は圧縮表示してPCの空白浪費を抑える ---- */
.pj-kanban-col:has(.pj-kanban-empty){ flex:0 0 132px !important; min-width:132px !important; opacity:.65; }
.pj-kanban-col:has(.pj-kanban-empty) .pj-kanban-empty{ padding:14px 6px; font-size:11px; }

/* ---- W4 (2026-06-10): 案件名のCJK字割れ防止(語境界優先で折返し・はみ出しはanywhereで保険) ---- */
.pj-card-name, .touo-pbar-name{ word-break:keep-all; overflow-wrap:anywhere; }

/* 2026-06-11 ユーザーSSレビュー: モバイルでは質問バルーン(touo-ask)を右上→左下へ(上部の死に空白の主因。PCは従来どおり右上) */
@media(max-width:600px){
  #touo-ask-menu-btn{ top:auto !important; bottom:calc(88px + env(safe-area-inset-bottom)) !important; right:auto !important; left:14px !important; }
}