/* outline.css */

/* ── ラッパー：行と子ノードを縦に並べるコンテナ ── */
.ol-node {
  /* 特別なスタイル不要。block要素として子を縦に積む */
}

/* ── 行：トグル/ドット + テキスト の横並び ── */
.ol-item {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0; font-size: 13px; position: relative;
  /* ※ ol-children はここに含めず、ol-node 直下の別要素として配置 */
}

.ol-toggle {
  cursor: pointer; width: 16px; flex-shrink: 0;
  background: none; border: none; color: var(--text-sub);
  font-size: 11px; padding: 0; line-height: 22px; text-align: center;
}
.ol-toggle:hover { color: var(--text); }

.ol-dot {
  width: 16px; flex-shrink: 0; text-align: center;
  line-height: 22px; color: var(--border); font-size: 10px;
}

.ol-text {
  flex: 1; color: var(--text); padding: 2px 8px;
  border-radius: 4px; cursor: pointer; min-height: 22px; line-height: 22px;
  white-space: pre-wrap; outline: none;
  /* テキストが長い場合に折り返す */
  word-break: break-all;
}
.ol-text:hover { background: var(--bg3); }

/* 選択中（color-mix フォールバック付き） */
.ol-item.selected > .ol-text {
  background: rgba(56, 139, 253, 0.15);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

/* 編集中 */
.ol-text[contenteditable="true"] {
  background: var(--bg); border: 1px solid var(--accent);
  cursor: text; box-shadow: 0 0 0 2px rgba(56,139,253,0.2);
}

.ol-count {
  font-size: 10px; color: var(--text-sub); line-height: 22px;
  margin-left: 2px; flex-shrink: 0;
}

/* 子ノード：行の下にインデント */
.ol-children { padding-left: 22px; margin-top: 1px; }

/* ルートノード */
.ol-item.root-item > .ol-text {
  font-weight: 700; font-size: 15px;
  border-left: 3px solid var(--accent);
  padding-left: 10px;
}

/* ── ノードアイコン ── */
.ol-node-icon {
  font-size: 14px; flex-shrink: 0;
  line-height: 22px; pointer-events: none;
}

/* ── リンクバッジ ── */
.ol-link-badge {
  font-size: 11px; color: var(--accent);
  text-decoration: none; margin-left: 2px;
  flex-shrink: 0; opacity: 0.8;
  padding: 1px 4px; border-radius: 3px;
}
.ol-link-badge:hover {
  opacity: 1;
  background: rgba(56, 139, 253, 0.15);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

/* ── D&D ── */
/* ドラッグ中：ラッパー全体を薄く（子ノードも含む） */
.ol-node.ol-dragging { opacity: 0.4; }

/* ドロップ位置インジケーター：行の上に緑ライン */
.ol-item.ol-drop-above::before {
  content: ''; display: block; height: 2px;
  background: var(--green); position: absolute;
  left: 0; right: 0; top: -1px;
  border-radius: 1px; pointer-events: none;
}