/*
 * 模块价值：我的项目以紧凑列表呈现名称、状态和明确入口，控制文字、图标与操作之间的距离。
 * 职责：拥有 4px 间距尺度、目录行/层级、柔和选择、键盘焦点和拖放位置，不改变业务数据。
 * 输入输出：目录视图的语义类与状态属性 → 深浅主题及桌面/窄屏布局。
 * 依赖：现有颜色与间距令牌；无 DOM、网络或持久化副作用；长名称允许增高，不裁掉操作。
 */
dialog.project-directory { width: min(940px,calc(100vw - 32px)); max-height: 88dvh; }
.directory-project-toolbar { display: flex; align-items: center; gap: var(--space-4,16px); margin-bottom: var(--space-3,12px); }
.directory-project-toolbar > .quiet-note { flex: 1; margin: 0; font-size: .8rem; line-height: 1.6; }
.directory-project-toolbar > .button { flex-shrink: 0; }
.directory-archive-list { display: grid; gap: var(--space-2,8px); }
.directory-archive-tree { display: grid; gap: var(--space-1,4px); list-style: none; margin: 0; padding: 0; }
.directory-archive-tree .directory-archive-tree { margin: var(--space-1,4px) 0 0 var(--space-4,16px); padding-left: var(--space-2,8px); border-left: 1px solid var(--line); }

/* 整行最小约 50px，名称与状态就近排列；右侧打开和菜单独立，不扩大名称的点击职责。 */
.directory-archive-row { display: grid; grid-template-columns: 24px minmax(0,1fr) auto 32px; align-items: center; gap: var(--space-2,8px); min-height: 48px; padding: var(--space-1,4px) var(--space-2,8px); border: 1px solid transparent; border-radius: 8px; container: project-row / inline-size; }
.directory-archive-row.is-selected { background: var(--soft); border-color: var(--line); }
.directory-archive-row > .project-option { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--space-1,4px) var(--space-2,8px); min-width: 0; min-height: 40px; padding: var(--space-1,4px) 0; border: 0; background: transparent; text-align: left; }
.directory-archive-row > .project-option:hover { background: transparent; color: var(--accent); }
.directory-project-name { display: inline-flex; align-items: center; gap: var(--space-2,8px); min-width: 0; max-width: 100%; font-size: .87rem; font-weight: 550; line-height: 1.5; }
.directory-project-name .directory-project-label { min-width: 0; font: inherit; color: inherit; overflow-wrap: anywhere; }
.directory-expand-marker { display: inline-flex; flex: none; align-items: center; }
.directory-archive-row .directory-project-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1,4px); max-width: 100%; font-size: .8rem; font-weight: 400; line-height: 20px; color: var(--muted); }
.directory-archive-row .directory-project-status span { font-size: inherit; }
.directory-state { display: inline-flex; align-items: center; min-height: 20px; padding: 0 var(--space-1,4px); border-radius: 6px; background: var(--paper); color: var(--muted); }
.directory-state.is-current { background: var(--soft); color: var(--accent); }
.directory-child-count { overflow-wrap: anywhere; }
.directory-archive-row .directory-open-project { min-height: 36px; padding: var(--space-1,4px) var(--space-3,12px); font-size: .8rem; white-space: nowrap; }
.directory-icon { display: block; flex: none; width: 16px; height: 16px; }
.directory-drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 24px; min-height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: grab; touch-action: none; }
.directory-drag-handle:hover { color: var(--accent); background: var(--soft); }
.directory-drag-handle:active { cursor: grabbing; }
/* 选择状态没有 outline；键盘焦点独立沿用清晰焦点环，不用鼠标聚焦伪装第二层选择。 */
.directory-drag-handle:focus-visible,.directory-archive-row > .project-option:focus-visible,.directory-row-menu > summary:focus-visible { outline: 3px solid var(--focus,var(--accent)); outline-offset: 2px; }
.directory-row-menu { position: relative; }
.directory-row-menu > summary { display: flex; align-items: center; justify-content: center; width: 32px; min-height: 40px; padding: var(--space-1,4px); border-radius: 8px; list-style: none; cursor: pointer; color: var(--muted); }
.directory-row-menu > summary::-webkit-details-marker { display: none; }
.directory-row-menu > summary:hover,.directory-row-menu[open] > summary { background: var(--soft); color: var(--accent); }
.directory-row-menu > div { position: absolute; right: 0; top: calc(100% + 4px); z-index: 3; display: grid; gap: var(--space-1,4px); width: max-content; min-width: 176px; max-width: min(280px,80vw); padding: var(--space-1,4px); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px #142c2422; }
.directory-row-menu > div > .button { justify-content: flex-start; padding: var(--space-2,8px) var(--space-3,12px); }

/* 包内树与管理说明分组相隔 24px，节点图标/文字相隔 8px，不把目录关系画成流程连线。 */
.directory-manager { margin-top: var(--space-6,24px); padding-top: var(--space-4,16px); border-top: 1px solid var(--line); }
.directory-manager h3 { margin: 0 0 var(--space-2,8px); }
.directory-manager > .quiet-note { font-size: .8rem; line-height: 1.6; }
.directory-body { display: grid; grid-template-columns: minmax(220px,1fr) minmax(220px,1fr); gap: var(--space-6,24px); margin-top: var(--space-4,16px); }
.directory-tree-panel { max-height: 50dvh; overflow: auto; padding-right: var(--space-3,12px); border-right: 1px solid var(--line); }
.directory-tree { display: grid; gap: var(--space-1,4px); margin: 0; padding: 0; list-style: none; }
.directory-tree .directory-tree { margin: var(--space-1,4px) 0 0 var(--space-4,16px); padding-left: var(--space-2,8px); border-left: 1px solid var(--line); }
.directory-tree-row { display: grid; grid-template-columns: 24px minmax(0,1fr) auto auto; align-items: center; gap: var(--space-1,4px); min-height: 48px; padding: var(--space-1,4px) 0; container: directory-node-row / inline-size; }
.directory-node { display: flex; align-items: center; gap: var(--space-2,8px); flex: 1; min-width: 0; min-height: 40px; padding: var(--space-1,4px) var(--space-2,8px); border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.directory-node:hover,.directory-node.selected { background: var(--soft); color: var(--accent); }
.directory-node > span { min-width: 0; }
.directory-node strong { display: block; overflow-wrap: anywhere; font-size: .87rem; font-weight: 550; line-height: 1.5; }
.directory-node small { display: block; margin-top: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.directory-order { display: flex; gap: var(--space-1,4px); }
.directory-order .button { width: 32px; min-width: 32px; min-height: 36px; padding: var(--space-1,4px); border-color: transparent; background: transparent; }
.directory-order .button:hover { background: var(--soft); }
.directory-tree-row > .button { min-height: 36px; padding: var(--space-1,4px) var(--space-2,8px); font-size: .8rem; }
.directory-node-panel > h3 { font-size: 1rem; }
.directory-node-panel > .quiet-note { font-size: .8rem; line-height: 1.6; overflow-wrap: anywhere; }
.directory-node-panel > .quiet-note + h3 { margin-top: var(--space-2,8px); }
.directory-management { margin-top: var(--space-4,16px); padding-top: var(--space-3,12px); border-top: 1px solid var(--line); }
.directory-management > summary { cursor: pointer; font-size: .87rem; line-height: 1.5; }
.directory-management form { display: grid; gap: var(--space-2,8px); margin-top: var(--space-3,12px); }
.directory-management label { display: grid; gap: var(--space-1,4px); font-size: .82rem; line-height: 1.5; }
.directory-management input,.directory-management select { box-sizing: border-box; width: 100%; min-height: 44px; padding: var(--space-2,8px) var(--space-3,12px); border: 1px solid var(--control-line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.directory-management form .button { justify-self: start; }
.directory-management > .quiet-note { margin-top: var(--space-2,8px); font-size: .8rem; line-height: 1.6; }
.directory-delete { display: grid; gap: var(--space-1,4px); margin-top: var(--space-4,16px); }
.directory-delete > .button { justify-self: start; color: var(--warning); }
.directory-delete small,.directory-trash-row small { display: block; font-size: .8rem; line-height: 1.6; color: var(--muted); }
.directory-trash { margin-top: var(--space-4,16px); padding-top: var(--space-3,12px); border-top: 1px solid var(--line); }
.directory-trash > summary { cursor: pointer; font-size: .87rem; }
.directory-trash-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3,12px); margin-top: var(--space-2,8px); }
.directory-trash-row > span { min-width: 0; overflow-wrap: anywhere; }
.directory-trash-row .button { flex-shrink: 0; }
.directory-empty-workspace { max-width: 700px; margin: auto; padding: 32px; }
.directory-empty-workspace p { color: var(--muted); }

/* 拖动插入线与放入提示临时覆盖整行，和持久的选择底色承担不同职责。 */
.directory-archive-row,.directory-tree-row { position: relative; border-radius: 8px; }
.directory-archive-row[data-drop-position="before"],.directory-tree-row[data-drop-position="before"] { box-shadow: 0 -2px 0 var(--accent); }
.directory-archive-row[data-drop-position="after"],.directory-tree-row[data-drop-position="after"] { box-shadow: 0 2px 0 var(--accent); }
.directory-archive-row[data-drop-position="inside"],.directory-tree-row[data-drop-position="inside"] { outline: 2px solid var(--accent); outline-offset: 2px; background: var(--soft); }

@media(max-width:700px) {
 dialog.project-directory { width: calc(100vw - 24px); }
 .directory-project-toolbar { align-items: flex-start; gap: var(--space-2,8px); }
 .directory-body { grid-template-columns: minmax(0,1fr); gap: var(--space-4,16px); }
 .directory-tree-panel { max-height: 35dvh; padding: 0 0 var(--space-3,12px); border-right: 0; border-bottom: 1px solid var(--line); }
 .directory-archive-tree .directory-archive-tree { margin-left: var(--space-2,8px); padding-left: var(--space-2,8px); }
 .directory-tree .directory-tree { margin-left: var(--space-2,8px); padding-left: var(--space-2,8px); }
 .directory-archive-row { grid-template-columns: 24px minmax(0,1fr) auto 32px; gap: var(--space-1,4px); padding-inline: var(--space-1,4px); }
 .directory-archive-row .directory-open-project { padding-inline: var(--space-2,8px); }
}
/* 手机从第四级起只加 4px 内距，保留 DOM 层级而不让八层缩进吞掉名称正文。 */
@media(max-width:520px) {
 dialog.project-directory { padding: var(--space-4,16px); }
 .directory-archive-tree .directory-archive-tree .directory-archive-tree .directory-archive-tree,
 .directory-tree .directory-tree .directory-tree .directory-tree { margin-left: 0; padding-left: var(--space-1,4px); }
}
/* 280px 以下让名称独占第一行，避免长中文被四列压成逐字换行；普通宽行保持单行密度。 */
@container project-row (max-width:280px) {
 .directory-archive-row > .project-option { grid-column: 2 / -1; grid-row: 1; }
 .directory-archive-row > .directory-drag-handle { grid-column: 1; grid-row: 1; align-self: start; }
 .directory-archive-row > .directory-open-project { grid-column: 2 / 4; grid-row: 2; justify-self: start; }
 .directory-archive-row > .directory-row-menu { grid-column: 4; grid-row: 2; justify-self: end; }
}
@container directory-node-row (max-width:280px) {
 .directory-tree-row > .directory-node { grid-column: 2 / -1; grid-row: 1; }
 .directory-tree-row > .directory-drag-handle { grid-column: 1; grid-row: 1; align-self: start; }
 .directory-tree-row > .directory-order { grid-column: 2 / 4; grid-row: 2; justify-self: start; }
 .directory-tree-row > .button { grid-column: 4; grid-row: 2; justify-self: end; }
}
/* 深层窄行把操作扩展到整行起点，不为第一行的拖柄继续预留宽度。 */
@container project-row (max-width:200px) {
 .directory-archive-row > .directory-open-project { grid-column: 1 / 4; }
}
@container directory-node-row (max-width:200px) {
 .directory-tree-row > .directory-order { grid-column: 1 / 4; }
}
/* 八层包内极窄行让进入独立一行，保留两个排序按钮的真实点击宽度。 */
@container directory-node-row (max-width:160px) {
 .directory-tree-row > .directory-order { grid-column: 1 / -1; }
 .directory-tree-row > .button { grid-column: 1 / -1; grid-row: 3; }
}
/* 窄屏或粗指针采用真实 44×44px 图标目标；同步网格列宽，目标不向邻控件外扩。 */
@media(max-width:720px),(pointer:coarse) {
 .directory-archive-row { grid-template-columns: 44px minmax(0,1fr) auto 44px; }
 .directory-tree-row { grid-template-columns: 44px minmax(0,1fr) auto auto; }
 .directory-archive-row > .project-option,.directory-drag-handle,.directory-row-menu > summary,.directory-archive-row .directory-open-project,.directory-node,.directory-tree-row > .button,.directory-order .button { min-height: 44px; }
 .directory-drag-handle,.directory-row-menu > summary { width: 44px; }
 .directory-tree-row > .button { min-width: 44px; }
 .directory-order .button { width: 44px; min-width: 44px; }
}