/* ============================================================
   BlockTree 公開側スタイル（自己完結・外部CDN不使用・テーマCSS非依存）
   depth(0〜4) を左インデント＋左側の縦コネクタ線／横の枝線で表現するシンプルなツリー表現。
   depthが深くなるほど基調色を淡→濃にして階層を視覚的に示す（.bktr-d0〜.bktr-d4 の --bktr-a）。
   ============================================================ */
.bktr-root{ max-width:100%; box-sizing:border-box; }
.bktr-root *{ box-sizing:border-box; }
.bktr-root .bktr-list{ list-style:none; margin:0; padding:0; }

/* --- ノード行の基本形 --- */
.bktr-root .bktr-item{ position:relative; }
.bktr-root .bktr-item.bktr-d0{ padding-left:0; }
.bktr-root .bktr-item.bktr-d1{ padding-left:26px; }
.bktr-root .bktr-item.bktr-d2{ padding-left:52px; }
.bktr-root .bktr-item.bktr-d3{ padding-left:78px; }
.bktr-root .bktr-item.bktr-d4{ padding-left:104px; }

/* depthに応じたアクセント強度（淡→濃） */
.bktr-root .bktr-item.bktr-d0{ --bktr-a:.5; }
.bktr-root .bktr-item.bktr-d1{ --bktr-a:.64; }
.bktr-root .bktr-item.bktr-d2{ --bktr-a:.78; }
.bktr-root .bktr-item.bktr-d3{ --bktr-a:.9; }
.bktr-root .bktr-item.bktr-d4{ --bktr-a:1; }

/* --- 折りたたみで隠された行 --- */
.bktr-root .bktr-item.bktr-hidden{ display:none; }

/* --- 接続線（コネクタ）: 祖先の縦ガイド線 ＋ 自ノードへの枝(elbow) --- */
.bktr-root .bktr-guides{ position:absolute; left:0; top:0; bottom:0; display:flex; pointer-events:none; }
.bktr-root .bktr-guide{ position:relative; width:26px; flex:0 0 26px; height:100%; }
.bktr-root .bktr-guide.bktr-guide-on::before{ content:""; position:absolute; left:12px; top:0; bottom:0; width:2px; background:rgba(var(--bktr-accent-rgb,58,91,217),.22); border-radius:1px; }
.bktr-root .bktr-branch{ position:relative; width:26px; flex:0 0 26px; height:100%; }
.bktr-root .bktr-branch::before{ content:""; position:absolute; left:12px; top:0; width:2px; background:rgba(var(--bktr-accent-rgb,58,91,217),.3); border-radius:1px; }
.bktr-root .bktr-branch::after{ content:""; position:absolute; left:12px; top:var(--bktr-elbow,24px); width:14px; height:2px; background:rgba(var(--bktr-accent-rgb,58,91,217),.4); border-radius:1px; }
.bktr-root .bktr-branch.bktr-branch-mid::before{ bottom:0; }
.bktr-root .bktr-branch.bktr-branch-last::before{ height:var(--bktr-elbow,24px); bottom:auto; }

/* --- ノード本体（トグル/ドット＋ラベル） --- */
.bktr-root .bktr-node{ display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:100%; }
.bktr-root .bktr-toggle{ width:20px; height:20px; flex:0 0 20px; border:0; border-radius:6px; background:rgba(var(--bktr-accent-rgb,58,91,217),calc(var(--bktr-a,1) * .16)); color:rgba(var(--bktr-accent-rgb,58,91,217),1); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.bktr-root .bktr-toggle:hover,
.bktr-root .bktr-toggle:focus-visible{ background:rgba(var(--bktr-accent-rgb,58,91,217),calc(var(--bktr-a,1) * .28)); outline:none; }
.bktr-root .bktr-toggle-ico{ display:inline-block; font-size:11px; line-height:1; transition:transform .18s ease; }
.bktr-root .bktr-item.bktr-collapsed > .bktr-node .bktr-toggle-ico{ transform:rotate(-90deg); }
.bktr-root .bktr-dot{ width:9px; height:9px; flex:0 0 9px; margin:0 5px; border-radius:50%; background:rgba(var(--bktr-accent-rgb,58,91,217),var(--bktr-a,1)); }
.bktr-root .bktr-label{ font-size:14px; font-weight:700; color:#20242c; text-decoration:none; overflow-wrap:break-word; min-width:0; }
a.bktr-label:hover, a.bktr-label:focus-visible{ color:rgba(var(--bktr-accent-rgb,58,91,217),1); text-decoration:underline; outline:none; }
.bktr-root .bktr-item.bktr-d0 .bktr-label{ font-size:16px; font-weight:900; }

/* --- カスタムアクセント色（ノード個別指定） --- */
.bktr-root .bktr-item.bktr-custom .bktr-dot{ background:rgb(var(--bktr-ic,58,91,217)); }
.bktr-root .bktr-item.bktr-custom .bktr-toggle{ background:rgba(var(--bktr-ic,58,91,217),.18); color:rgb(var(--bktr-ic,58,91,217)); }
.bktr-root.bktr-style-org .bktr-item.bktr-custom .bktr-node{ border-left-color:rgb(var(--bktr-ic,58,91,217)); }
.bktr-root .bktr-item.bktr-custom a.bktr-label:hover,
.bktr-root .bktr-item.bktr-custom a.bktr-label:focus-visible{ color:rgb(var(--bktr-ic,58,91,217)); }

/* --- style: org（カード＋縦コネクタ線） --- */
.bktr-root.bktr-style-org{ --bktr-elbow:27px; }
.bktr-root.bktr-style-org .bktr-item{ padding-top:6px; padding-bottom:6px; }
.bktr-root.bktr-style-org .bktr-node{ width:100%; background:#fff; border:1px solid #e2e6ee; border-left:4px solid rgba(var(--bktr-accent-rgb,58,91,217),var(--bktr-a,1)); border-radius:10px; padding:11px 16px; min-height:20px; box-shadow:0 2px 7px rgba(20,30,60,.06); }

/* --- style: list（シンプルなインデント一覧） --- */
.bktr-root.bktr-style-list{ --bktr-elbow:17px; }
.bktr-root.bktr-style-list .bktr-item{ padding-top:3px; padding-bottom:3px; }
.bktr-root.bktr-style-list .bktr-node{ padding:3px 2px; }
.bktr-root.bktr-style-list .bktr-label{ font-size:13.5px; font-weight:600; }
.bktr-root.bktr-style-list .bktr-item.bktr-d0 .bktr-label{ font-size:15px; font-weight:800; }

/* --- orientation: horizontal（簡易的な階段状プレビュー。厳密な水平ツリー描画は行わず、
       depthに応じて縦位置をずらすことで階層関係を視覚的に示す簡略表示） --- */
.bktr-root.bktr-orient-horizontal .bktr-list{ display:flex; flex-wrap:nowrap; align-items:flex-start; gap:18px; overflow-x:auto; padding:4px 4px 16px; -webkit-overflow-scrolling:touch; }
.bktr-root.bktr-orient-horizontal .bktr-item{ flex:0 0 190px; width:190px; padding-left:0 !important; margin-top:calc(var(--bktr-depth,0) * 32px); }
.bktr-root.bktr-orient-horizontal .bktr-guides{ display:none; }
.bktr-root.bktr-orient-horizontal .bktr-item:not(.bktr-d0)::before{ content:""; position:absolute; left:-10px; top:22px; width:10px; height:2px; background:rgba(var(--bktr-accent-rgb,58,91,217),.35); }
.bktr-root.bktr-orient-horizontal .bktr-node{ width:100%; }

/* --- 空状態 --- */
.bktr-root .bktr-hint{ border:2px dashed #a9b6de; border-radius:12px; background:#f5f7fd; padding:18px 16px; text-align:center; color:#4a5578; font-size:13px; font-weight:700; }

@media (max-width:560px){
  .bktr-root .bktr-item.bktr-d1{ padding-left:18px; }
  .bktr-root .bktr-item.bktr-d2{ padding-left:36px; }
  .bktr-root .bktr-item.bktr-d3{ padding-left:54px; }
  .bktr-root .bktr-item.bktr-d4{ padding-left:72px; }
  .bktr-root .bktr-guide,
  .bktr-root .bktr-branch{ width:18px; flex-basis:18px; }
  .bktr-root .bktr-guide::before,
  .bktr-root .bktr-branch::before{ left:8px; }
  .bktr-root .bktr-branch::after{ left:8px; width:10px; }
  .bktr-root.bktr-style-org .bktr-node{ padding:9px 12px; }
}

@media (prefers-reduced-motion: reduce){
  .bktr-root .bktr-toggle-ico{ transition:none; }
}