/* Components — editor UI elements */

/* ── File Tree Nodes ── */
.tree-node{
    display:flex;align-items:center;padding:5px 16px;cursor:pointer;
    gap:6px;font-size:13px;color:var(--text2);transition:all var(--transition);
    white-space:nowrap;border-left:2px solid transparent;
}
.tree-node:hover{background:var(--bg)}
.tree-node.active{background:var(--accent-bg);color:var(--accent);font-weight:500;border-left-color:var(--accent)}
.tree-toggle{
    width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;
    flex-shrink:0;font-size:12px;color:var(--text3);transition:transform var(--transition);
    font-family:monospace;line-height:1;
}
.tree-toggle.expanded{transform:rotate(90deg)}
.tree-toggle.empty{visibility:hidden}
.tree-icon{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px}
.tree-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-children{padding-left:16px}
.tree-children.collapsed{display:none}

/* ── Section Cards ── */
.section-card{
    margin:6px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);
    overflow:hidden;background:var(--card-bg);
    transition:border-color var(--transition);
}
.section-card:hover{border-color:var(--border2)}
.section-card.dirty{border-color:var(--warning);border-left:3px solid var(--warning)}
.section-card-header{
    display:flex;align-items:center;gap:8px;padding:6px 12px;
    background:var(--bg);cursor:pointer;user-select:none;font-size:12px;
}
.section-card-header:hover{background:var(--border)}
.section-type-badge{
    font-size:10px;padding:1px 7px;border-radius:4px;
    background:var(--accent);color:#fff;text-transform:uppercase;font-weight:600;
}
.section-type-badge.type-paragraph{background:var(--text3)}
.section-card-title{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.section-card-body{padding:0}
.section-card-body textarea{
    width:100%;min-height:60px;padding:12px;background:var(--card-bg);
    color:var(--text);border:none;resize:vertical;
    font-family:var(--font-mono);font-size:13px;line-height:1.65;tab-size:2;outline:none;
}
.section-card-body textarea:focus{box-shadow:inset 0 0 0 1px var(--accent)}
.section-card.dragging{opacity:.5;border-style:dashed}
.section-card.drag-over{border-top:2px solid var(--accent)}

/* ── Context Menu ── */
.context-menu{
    position:fixed;z-index:9999;min-width:160px;
    background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-sm);
    box-shadow:var(--shadow-md);padding:4px 0;
}
.context-menu-item{
    padding:6px 16px;font-size:13px;cursor:pointer;color:var(--text2);
    transition:background var(--transition);
}
.context-menu-item:hover{background:var(--bg)}
.context-menu-item.danger{color:var(--error)}
.context-menu-divider{height:1px;background:var(--border);margin:4px 0}

/* ── Skeleton ── */
.skeleton{
    background:linear-gradient(90deg,var(--bg) 25%,var(--border) 50%,var(--bg) 75%);
    background-size:200% 100%;animation:sk 1.5s infinite;border-radius:var(--radius-sm);
}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Spinner ── */
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{
    width:16px;height:16px;border:2px solid var(--border);
    border-top-color:var(--accent);border-radius:50%;
    animation:spin .6s linear infinite;display:inline-block;
}