/* ============================================================
   教学设计篮：悬浮入口 + 右侧抽屉 + 全屏预览
   布局机制：
   - 并排模式：.wrap 通过 margin-right 让出抽屉宽度，工作区保持 ≥720px；
     空间不足（JS 计算）时抽屉切为覆盖式（.td-cover），不再压缩左侧。
   - 八步导航/左侧内容宽度约束在 app.css 与 design-workbench.css。
   ============================================================ */

/* ---------- 悬浮入口：文档图标 + 教案篮 + 数量 ---------- */
.td-launcher{position:fixed;right:var(--space-4);bottom:var(--space-6);z-index:46;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;background:var(--color-surface);color:var(--color-text-primary);border:1px solid var(--color-border-strong);border-radius:var(--radius-control);font-size:14px;cursor:pointer;box-shadow:var(--shadow)}
.td-launcher:hover{color:var(--color-primary);border-color:var(--color-primary)}
.td-launcher .td-ic{color:var(--color-text-secondary);flex:none}
.td-launcher-count{min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;background:var(--color-primary-soft);color:var(--color-primary);border-radius:var(--radius-control);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
/* 抽屉展开时入口隐藏（抽屉内已有收起按钮），避免重复显示与遮挡 */
.td-open .td-launcher{display:none}

/* ---------- 抽屉容器与并排/覆盖两种模式 ---------- */
.td-open .design-page,.td-open .app-content{min-width:0}
body.design-page.td-open .wrap{margin-right:calc(var(--td-width) + var(--space-4));max-width:none;min-width:0}
.td-drawer{position:fixed;inset:0 0 0 auto;width:var(--td-width);z-index:45;background:var(--color-surface);border-left:1px solid var(--color-border);display:flex;flex-direction:column;min-height:0;color:var(--color-text-primary);font-size:14px}
.td-drawer[hidden]{display:none}
/* 覆盖式抽屉：窗口宽度不足以让左侧保持可阅读宽度时启用（JS 判定） */
.td-drawer.td-cover{width:min(var(--td-width),calc(100vw - 24px));box-shadow:var(--shadow-overlay)}
body.design-page.td-open.td-cover .wrap{margin-right:auto;max-width:var(--width-content)}
body.td-cover .td-resizer{display:none}

/* ---------- 第一行：主标题栏 ---------- */
.td-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border)}
.td-head-title{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.td-head-title .td-ic{color:var(--color-text-secondary);flex:none}
.td-head-title h2{font-size:16px;font-weight:650;margin:0;white-space:nowrap}
.td-count{font-size:12px;color:var(--color-text-secondary);white-space:nowrap;font-variant-numeric:tabular-nums}
.td-head-actions{display:flex;gap:var(--space-1);flex:none}

/* ---------- 统一图标按钮 ---------- */
.td-ic{display:inline-block;vertical-align:middle;flex:none}
.td-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid transparent;border-radius:var(--radius-control);background:transparent;color:var(--color-text-secondary);cursor:pointer;flex:none}
.td-icon-btn:hover{color:var(--color-text-primary);background:var(--color-background)}
.td-icon-btn:disabled{opacity:.35;cursor:default;background:transparent}
.td-icon-btn:active{color:var(--color-primary)}

/* ---------- 第二行：模式切换 + 动态工具栏 ---------- */
.td-tabs{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-4);border-bottom:1px solid var(--color-border)}
.td-tabs>button[data-td-view]{background:transparent;border:0;border-bottom:2px solid transparent;padding:10px 2px;margin-bottom:-1px;color:var(--color-text-secondary);font:inherit;font-size:14px;cursor:pointer;white-space:nowrap;flex:none}
.td-tabs>button[data-td-view].on{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:600}
.td-tabs-tools{margin-left:auto;display:flex;align-items:center;gap:2px;min-width:0}
.td-zoom-pct{font-size:12px;color:var(--color-text-secondary);min-width:38px;text-align:center;font-variant-numeric:tabular-nums}

/* ---------- 下拉菜单（更多操作 / 节点操作） ---------- */
.td-menu{position:relative;display:inline-flex}
.td-menu>summary{list-style:none;cursor:pointer}
.td-menu>summary::-webkit-details-marker{display:none}
.td-menu[open]>summary.td-icon-btn{color:var(--color-text-primary);background:var(--color-background)}
.td-menu-panel{position:absolute;right:0;top:calc(100% + 4px);z-index:8;min-width:190px;max-height:min(60vh,420px);overflow:auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-overlay);box-shadow:var(--shadow-overlay);padding:var(--space-2);display:flex;flex-direction:column;gap:2px}
.td-menu-panel button{background:transparent;border:0;border-radius:var(--radius-control);color:var(--color-text-primary);font:inherit;font-size:13px;text-align:left;padding:6px 10px;cursor:pointer;white-space:nowrap}
.td-menu-panel button:hover{background:var(--color-background)}
.td-menu-panel .td-danger,.td-menu-panel button.td-danger{color:var(--color-error)}
.td-menu-title{font-size:12px;color:var(--color-text-tertiary);padding:4px 10px 2px}
.td-menu-summary{padding:2px 10px 8px;font-size:12px;color:var(--color-text-secondary);display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--color-border);margin-bottom:4px}
.td-menu-summary p{display:flex;justify-content:space-between;gap:8px;margin:0}
.td-menu-summary b{font-weight:400;white-space:nowrap}
.td-menu-check{display:flex;gap:6px;align-items:center;font-size:13px;padding:6px 10px;white-space:nowrap;cursor:pointer;margin:0}

/* ---------- 第三层：按需设置区（教案预览模式） ---------- */
.td-settings{display:flex;gap:var(--space-3);padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--color-border);align-items:center}
.td-settings[hidden]{display:none}
.td-setting-field{display:flex;align-items:center;gap:var(--space-2);font-size:12px;color:var(--color-text-secondary);min-width:0;white-space:nowrap;margin:0}
.td-setting-field.td-field-template{flex:0 0 auto}
.td-setting-field.td-field-title{flex:1;min-width:0}
.td-setting-field select{max-width:150px}
.td-setting-field input{min-width:0;flex:1}

/* ---------- 通用输入控件 ---------- */
.td-drawer input:not([type=checkbox]),.td-drawer select,.td-editor input:not([type=checkbox]),.td-editor select,.td-editor textarea{border:1px solid var(--color-border-strong);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-text-primary);font:inherit;padding:var(--space-2);min-height:32px;box-sizing:border-box;max-width:100%}
.td-drawer input[type=checkbox],.td-editor input[type=checkbox]{width:auto;min-width:16px;min-height:16px;padding:0;margin:0;flex:0 0 auto}

/* ---------- 内容区 ---------- */
.td-body{overflow:auto;min-height:0;flex:1;padding:0 var(--space-4) var(--space-4)}
/* 侧栏预览：自适应抽屉宽度，不模拟 A4 纸宽 */
.td-body .td-document{padding:8px 2px 24px;max-width:none;background:transparent;font-size:16px}
.td-body .td-document h1{margin-top:var(--space-4)}
.td-body .td-document table{table-layout:auto}

/* ---------- 章节分组标题 ---------- */
.td-list-section h3{display:flex;align-items:center;gap:var(--space-2);font-size:13px;font-weight:600;color:var(--color-text-secondary);margin:var(--space-4) 0 var(--space-1)}
.td-sec-toggle{display:inline-flex;align-items:center;gap:4px;background:transparent;border:0;padding:2px 0;color:inherit;font:inherit;font-weight:600;cursor:pointer;min-width:0}
.td-sec-toggle .td-ic{transition:transform .15s ease}
.td-sec-toggle[aria-expanded="false"] .td-ic{transform:rotate(-90deg)}
.td-sec-count{font-size:12px;font-weight:400;color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}

/* ---------- 内容节点：默认紧凑，点击展开详情 ---------- */
.td-item{border-bottom:1px solid var(--color-border);padding:var(--space-2) 0;overflow-wrap:anywhere}
.td-item-row{display:flex;align-items:flex-start;gap:2px;min-width:0}
.td-drag{display:inline-flex;align-items:center;justify-content:center;width:22px;height:28px;margin-top:2px;color:var(--color-text-tertiary);cursor:grab;flex:none}
.td-item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;background:transparent;border:0;padding:2px;color:inherit;font:inherit;text-align:left;cursor:pointer}
.td-item-main strong{font-size:14px;font-weight:600;line-height:1.5}
.td-item-badge{font-size:12px;color:var(--color-text-tertiary)}
.td-item-badge.is-warn{color:var(--color-error)}
.td-item-main .td-excerpt{font-size:13px;line-height:1.6;color:var(--color-text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.td-item-chevron{transform:rotate(0);transition:transform .15s ease;margin-top:2px}
.td-item.is-open .td-item-chevron{transform:rotate(180deg)}
.td-item-ops{display:flex;align-items:center;gap:0;flex:none}

/* 展开态详情 */
.td-item-detail{padding:var(--space-2) 0 var(--space-1) 30px;margin-top:var(--space-2);border-top:1px dashed var(--color-border);display:flex;flex-direction:column;gap:var(--space-2)}
.td-item-meta{font-size:12px;color:var(--color-text-tertiary)}
.td-item-content{font-size:13px;line-height:1.7;color:var(--color-text-primary);display:flex;flex-direction:column;gap:6px}
.td-item-content p{margin:0}
.td-item-content table{font-size:12px;table-layout:auto}
.td-item-content figure{margin:6px 0}
.td-item-content img,.td-item-content svg{max-width:100%;height:auto}
.td-item-tools{display:flex;gap:var(--space-1);align-items:center;flex-wrap:wrap}
.td-item-tools label{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--color-text-secondary);white-space:nowrap;margin:0}
.td-item-tools select{max-width:150px;font-size:13px;min-height:28px}

/* ---------- 文字按钮（展开区操作） ---------- */
.td-text-btn,.td-item-tools button,.td-item-more button,.td-section-edit button{background:transparent;border:0;border-radius:var(--radius-control);color:var(--color-text-secondary);font:inherit;font-size:13px;cursor:pointer;padding:var(--space-1) var(--space-2)}
.td-text-btn:hover,.td-item-tools button:hover{color:var(--color-text-primary);background:var(--color-background)}
.td-text-btn.td-danger,.td-item-tools button.td-danger{color:var(--color-error)}

/* ---------- 空状态 / 原位加号 ---------- */
.td-empty{text-align:center;padding:var(--space-8) var(--space-4)}
.td-empty>span{font-size:24px;color:var(--color-text-secondary)}
.td-empty h3{font-size:18px;margin:var(--space-3) 0}
.td-empty p{font-size:15px;line-height:1.7;color:var(--color-text-secondary)}
.td-add{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-text-secondary);font-size:18px;cursor:pointer}
.td-add.is-selected{color:var(--color-primary);border-color:var(--color-primary);background:var(--color-primary-soft)}
.td-inline{display:inline-flex;margin-right:var(--space-2);vertical-align:middle}

/* ---------- 底部：保存状态 + 导出 ---------- */
.td-footer{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-top:1px solid var(--color-border);background:var(--color-surface);flex-wrap:wrap}
.td-save{font-size:12px;color:var(--color-text-secondary);min-height:20px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.td-save:empty{display:none}
.td-save.td-error{color:var(--color-error)}
.td-save button{margin:0}
.td-footer-actions{display:flex;gap:var(--space-2);margin-left:auto;flex-wrap:wrap}

/* ---------- 操作反馈 toast（移除后撤销等） ---------- */
.td-toast{position:absolute;left:var(--space-4);right:var(--space-4);bottom:64px;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-control);box-shadow:var(--shadow-overlay);padding:8px 12px;font-size:13px}
.td-toast[hidden]{display:none}
.td-toast button{background:transparent;border:0;color:var(--color-primary);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:2px 6px;flex:none}

/* ---------- 全屏教案预览：A4 阅读区 ---------- */
.td-full,.td-editor{padding:0;border:1px solid var(--color-border);border-radius:var(--radius-overlay);background:var(--color-surface);color:var(--color-text-primary);max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);box-shadow:var(--shadow-overlay)}
.td-full{width:min(1040px,calc(100vw - 48px))}
.td-editor{width:680px;padding:var(--space-4)}
.td-full::backdrop,.td-editor::backdrop{background:rgba(0,0,0,.3)}
.td-full-tools{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);position:sticky;top:0;background:var(--color-surface);z-index:1;flex-wrap:wrap}
.td-full-tools b{margin-right:auto;font-size:15px}
.td-full-zoom{display:inline-flex;align-items:center;gap:2px}
.td-full-scroll{overflow:auto;max-height:calc(100dvh - 130px);padding:24px;background:var(--color-background)}
.td-full .td-document{max-width:794px;margin:0 auto;box-shadow:var(--shadow-paper);padding:56px 64px}
.td-editor header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.td-editor h3{font-size:18px;margin:0}
.td-editor p{font-size:15px;line-height:1.7}
.td-editor label{display:flex;flex-direction:column;gap:var(--space-2);margin:var(--space-3) 0}
.td-editor textarea{width:100%;line-height:1.7;resize:vertical}
.td-editor label:has(input[type=checkbox]){flex-direction:row;align-items:center}
.td-section-edit{display:flex;gap:var(--space-2);margin:var(--space-2) 0;align-items:center}
.td-section-edit input{flex:1;min-width:0}
.td-section-edit select{max-width:180px}
.td-section-form h4{margin:var(--space-3) 0 var(--space-1);font-size:14px}

/* ---------- 拖拽手柄 / 焦点可见性 ---------- */
.td-entry:focus-visible,.td-drawer button:focus-visible,.td-drawer summary:focus-visible,.td-drawer input:focus-visible,.td-drawer select:focus-visible,.td-resizer:focus-visible,.td-editor button:focus-visible,.td-launcher:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}

/* ---------- 宽度拖拽 ---------- */
.td-resizer{position:absolute;inset:0 auto 0 0;width:8px;cursor:col-resize;touch-action:none;z-index:3}
.td-resizer:hover{border-left:2px solid var(--color-primary)}

/* ---------- 窄屏兜底：覆盖式抽屉 ---------- */
@media(max-width:900px){
  .td-drawer{width:min(var(--td-width),calc(100vw - 16px));box-shadow:var(--shadow-overlay)}
  .td-resizer{display:none}
}
@media(max-width:600px){
  .td-head,.td-tabs,.td-settings,.td-footer{padding:var(--space-2) var(--space-3)}
  .td-body{padding:0 var(--space-3) var(--space-3)}
  .td-section-edit{flex-wrap:wrap}
  .td-setting-field select{max-width:120px}
  .td-full-tools{flex-wrap:wrap}
  .td-full .td-document{padding:var(--space-4)}
  .td-toast{left:var(--space-2);right:var(--space-2)}
}

/* ---------- 第一~三步「选配使用」：右下角悬浮入口 + 选配弹窗 ---------- */
.sel-use-fab{position:fixed;right:var(--space-4);bottom:var(--space-6);z-index:46;display:inline-flex;align-items:center;gap:var(--space-2);min-height:40px;padding:8px 14px;background:var(--color-surface);color:var(--color-text-primary);border:1px solid var(--color-border-strong);border-radius:var(--radius-control);font-size:14px;cursor:pointer;box-shadow:var(--shadow)}
.sel-use-fab:hover{color:var(--color-primary);border-color:var(--color-primary)}
.sel-use-fab[hidden]{display:none}
.sel-use-fab-count{min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;background:var(--color-primary-soft);color:var(--color-primary);border-radius:var(--radius-control);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.sel-modal{padding:0;border:1px solid var(--color-border);border-radius:var(--radius-overlay);background:var(--color-surface);color:var(--color-text-primary);width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 48px);box-shadow:var(--shadow-overlay)}
.sel-modal::backdrop{background:rgba(0,0,0,.3)}
.sel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) var(--space-4) var(--space-3);border-bottom:1px solid var(--color-border)}
.sel-head h3{font-size:18px;margin:0}
.sel-principle{margin:var(--space-2) 0 0;font-size:13px;color:var(--color-text-secondary);line-height:1.6}
.sel-summary{padding:var(--space-2) var(--space-4);font-size:13px;color:var(--color-text-secondary);border-bottom:1px solid var(--color-border)}
.sel-tree{overflow:auto;max-height:calc(100dvh - 250px);padding:var(--space-2) var(--space-4) var(--space-3)}
.sel-module{margin:var(--space-3) 0 0;border-top:1px solid var(--color-border);padding-top:var(--space-2)}
.sel-module:first-child{margin-top:0;border-top:0;padding-top:var(--space-2)}
.sel-row{display:flex;align-items:center;gap:var(--space-2);min-height:32px;font-size:14px;cursor:pointer;color:var(--color-text-primary)}
.sel-row input[type=checkbox]{width:auto;min-width:16px;min-height:16px;padding:0;margin:0;flex:0 0 auto;accent-color:var(--color-primary)}
.sel-module-row{min-height:38px;font-weight:600;font-size:15px}
.sel-field-body{margin-left:var(--space-6);border-left:1px solid var(--color-border);padding-left:var(--space-4)}
.sel-node-row{font-size:14px;color:var(--color-text-secondary)}
.sel-node-row .sel-label{overflow-wrap:anywhere}
.sel-count{margin-left:auto;font-size:12px;color:var(--color-text-tertiary);font-variant-numeric:tabular-nums;flex:none}
.sel-check{display:inline-flex;flex:none}
.sel-empty{padding:var(--space-4) 0}
.sel-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-border);background:var(--color-surface);flex-wrap:wrap}
.sel-foot-right{display:flex;gap:var(--space-2);margin-left:auto}