@import "tailwindcss";

/* daisyUI plugin (Tailwind v4: CSS-first plugin loading)
   Themes / プロジェクト固有トークンは docs/design/tokens.md と同期管理する。
   詳細: ADR 0005 / design-tokens skill */
@plugin "daisyui" {
  themes: light --default, dark;
  logs: false;
}

/* Optional: legacy v3-style config (content / theme.extend) を読み込む
   将来 Tailwind v3 互換の theme.extend を使いたくなった場合のみ有効化する。
   現状は @plugin "daisyui" の semantic color のみで運用するためコメントアウト。
   @config "../../../config/tailwind.config.js"; */

/* ===== 順7 / §6.10 条件分岐の視覚表現 (B+A: L字コネクタ + 淡帯) =====
   Tailwind ユーティリティ/daisyUI で表現不能な「疑似要素ベースの L字線」
   「淡い rgba 帯」のみを @layer utilities に CSS custom property 化して定義する
   (任意値直書き・カスタム SCSS 禁止のルール内。色は §6.10 確定値)。
   YES = 緑系 (greenm rgba) / NO = 橙系 (orangem rgba)。ネストしても 4% 透明度で破綻しない。 */
@layer utilities {
  /* 順7 / §6.9 未設定ノードの左帯 width (3px は Tailwind 標準 token 外のため逃がす)。
     色は erb 側で daisyUI semantic の border-l-warning を併用する。 */
  .node-unset-bar {
    border-left-width: 3px;
  }

  /* issue-B / §6.189 (ADR 0045): Step4 (DAG エディタ) を「左ペイン (ノード一覧) /
     右ペイン (ノード編集)」で独立 Y軸スクロールにし、フッターをカード下端に固定するための
     ビューポート高。固定フォールバックの min-h ハードコードを廃し、エディタ領域を
     calc(100vh - 画面上部クロム) で確保する。設計モード (topbar 48 + stepper 44 + 余白) と
     確認モード (topbar 48 + alert + 余白) のクロム高が概ね釣り合うため、両モード共用の
     単一値とする。任意値 h-[calc] を erb に直書きせず @layer utilities へ逃がす
     (ADR 0005・既存 branch 系・node-unset-bar と同じ 4 例外枠の流儀。任意色は足さない)。
     min-height により背の低い DAG でもカードが極端に縮まないようにする。 */
  .step4-editor-h {
    height: calc(100vh - 11.5rem);
    min-height: 24rem;
  }

  :root {
    --branch-connector: rgba(0, 0, 0, 0.18); /* mockup --border2 相当 (L字線の色) */
    --branch-yes-border: rgba(31, 158, 117, 0.4);
    --branch-yes-bg: rgba(31, 158, 117, 0.04);
    --branch-no-border: rgba(216, 90, 48, 0.4);
    --branch-no-bg: rgba(216, 90, 48, 0.04);
    --branch-alt-border: rgba(0, 0, 0, 0.18);
    --branch-alt-bg: rgba(0, 0, 0, 0.02);
  }

  /* L字コネクタ: condition/ab_test から各分岐へ伸びる縦線。
     branch-split (pl-[18px]) の gutter 左寄りに 1.5px の縦線を立てる。 */
  .branch-line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 11px;
    width: 1.5px;
    background: var(--branch-connector);
  }

  /* 横枝 (L字の足): 各分岐の左に縦線から content へ伸びる短い横線。 */
  .branch-branch::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 11px;
    width: 16px;
    height: 1.5px;
    background: var(--branch-connector);
  }

  /* 淡帯: 各分岐の配下ノード群を淡い色帯で囲う。
     border-radius 0 6px 6px 0 で右側のみ丸める (左は罫線)。 */
  .branch-wrap-yes,
  .branch-wrap-no,
  .branch-wrap-alt {
    border-left-width: 2px;
    border-left-style: solid;
    border-radius: 0 6px 6px 0;
    padding: 6px 7px 6px 9px;
  }
  .branch-wrap-yes {
    border-left-color: var(--branch-yes-border);
    background: var(--branch-yes-bg);
  }
  .branch-wrap-no {
    border-left-color: var(--branch-no-border);
    background: var(--branch-no-bg);
  }
  .branch-wrap-alt {
    border-left-color: var(--branch-alt-border);
    background: var(--branch-alt-bg);
  }

  /* 順8: コンバージョン済みバッジ (紫系)。
     daisyUI semantic に purple は存在しないため CSS custom property で定義する
     (ADR / CLAUDE.md「任意値は @layer utilities で CSS custom property 化」)。
     送信ログ §2.6 ステータスバッジ: コンバージョン済み = bg-purple。 */
  .badge-conversion {
    --badge-conversion-bg: oklch(50% 0.2 295);
    background-color: var(--badge-conversion-bg);
    border-color: var(--badge-conversion-bg);
    color: oklch(98% 0.01 295);
  }

  /* v3 §セグメント §6 §1.1: テスト用セグメントバッジ (紫系)。
     daisyUI semantic に purple は無いため badge-conversion と同様 CSS custom property 化。
     モック seg-list の `badge b-purple` (薄紫背景 + 濃紫文字) に対応。
     b-purple はモック専用クラスのため実プロジェクトでは本クラスを使う。 */
  .badge-test {
    --badge-test-bg: oklch(92% 0.04 295);
    background-color: var(--badge-test-bg);
    border-color: oklch(80% 0.08 295);
    color: oklch(45% 0.18 295);
  }

  /* issue #664 (#631フィードバック): キレイパスのサービス識別色をブランド色 #49c2c2
     (ティール系) に変更。daisyUI semantic (info=青系) だと自社ブランドカラーと一致しない
     というマーケターフィードバックのため、badge-conversion / badge-test と同じ枠組みで
     カスタムトークン化する (ADR 0005・任意色直書き禁止のため view には持ち込まずここに集約)。
     #49c2c2 単色は白背景比でコントラスト比 2.1 (WCAG AA 未達) のため、
     - badge: 薄いティール背景 + 濃いティール文字 (daisyUI badge の定石。コントラスト比 6.9)
     - text/border: ブランド色そのものより一段濃いティール (コントラスト比 5.6) を用いる。
     3クラスとも --token-kireipass-accent を軸にした同系色のバリアントで統一する。 */
  .badge-kireipass {
    --token-kireipass-accent: #49c2c2;
    --badge-kireipass-bg: #d9f2f2;
    background-color: var(--badge-kireipass-bg);
    border-color: var(--token-kireipass-accent);
    color: #0e6666;
  }

  .text-kireipass {
    color: #0e6666;
  }

  .border-kireipass {
    border-color: #49c2c2;
  }
}