/* v3.439 手动分隔线（业主 2026-10-31）
   需求：① 手动加（按钮 / 打一行 ====）② 黑色 ③ 宽度跟着本行行宽走（含缩进）
        ④ 明显比常规 1px 边框粗 ⑤ 位置可拖、粗细可调（4 档）

   实现要点：
   · 线用 ::after 画在 .mrow 上 —— 不加 DOM，不改布局、不影响选中和拖拽。
   · 左端 = var(--hrl)（JS 按层级算：d*24+40，跟这一行文字的起点对齐）；
     右端 = right:10px（正文内容区右边）→ 合起来就是**这一行的行宽**，层级越深越短。
   · 粗 = var(--hrw)（JS 从节点字段 hw 读；没设过就是 3px，比 1px 边框粗一档起）。
   · 色 = **默认跟站点主题色走**（--acc，浅色 #3370ff / 深色 #5b8def）。
     业主 2026-10-31：「感觉添加上去后不好看，能不能可以调换线条颜色和网站主题的颜色一致」
     → 原来写死纯黑，现在默认取主题色，另外给 6 个可换的颜色（墨黑 / 红 / 橙 / 绿 / 紫 / 灰），
       存在节点的 hc 字段上（目录树存在 treehr.c），没存过就用主题色。
     全部走 CSS 变量，所以切主题、换皮肤自动跟着变，不用重画。 */

:root{
  /* 线的颜色板：第一个「主题色」直接引用站点的 --acc，主题一改它跟着改 */
  --hrc-acc:  var(--acc,#3370ff);
  --hrc-ink:  #1f2328;   /* 墨黑（深色主题下会自动翻成近白，见下） */
  --hrc-red:  #e5484d;
  --hrc-amber:#e8890c;
  --hrc-green:#2f9e63;
  --hrc-violet:#7c5cff;
  --hrc-gray: #939aa5;

  --hrc: var(--hrc-acc);                        /* 默认线色 = 主题色 */
  --hrw0: 3px;                                  /* 默认粗细：3px（常规边框是 1px） */
  --hrpad: 6px;                                 /* 线上下留白，让它自成一块 */
}
/* 深色主题：墨黑必须翻过来，否则黑线落在黑底上等于没有 */
[data-theme="dark"]{
  --hrc-ink: #e6e8ea;
  --hrc-red: #ff6b6f;
  --hrc-amber:#f0a23a;
  --hrc-green:#41b981;
  --hrc-violet:#9c86ff;
  --hrc-gray:#8b929a;
}

/* ---------------- 分隔线本体 ---------------- */
#mlist .mrow.mhr{ padding:var(--hrpad) 0; }

/* 圆点 / 三角留位置但不显示，缩进层级照旧；鼠标移到这一行再露出来 ——
   圆点要能按住拖（拖拽就是靠它），一直藏死就没法挪位置了。 */
#mlist .mrow.mhr .mbullet,
#mlist .mrow.mhr .mtri{ visibility:hidden; }
#mlist .mrow.mhr:hover .mbullet,
#mlist .mrow.mhr:focus-within .mbullet{ visibility:visible; }

/* 字符藏起来（行高不变，所以线的位置不会跳） */
#mlist .mrow.mhr .mtext{
  color:transparent !important;
  text-shadow:none !important;
  background:none !important;
}
#mlist .mrow.mhr .mtext .hl,
#mlist .mrow.mhr .mtext u{ text-decoration:none; }

/* 线画在 .minner 上，不是 .mrow 上 ——
   .mrow 的宽度含右侧那一排按钮（勾选 / 阅读数 / 标签 …），画在 .mrow 上会一直捅到按钮底下；
   .minner 的宽度才是**这一行文字真正能用的宽度**，右端 right:0 正好收在文字右边界。
   左端 40px = 三角 + 圆点那一段（缩进 mgl 在 .minner 外面，所以层级越深起点自动越靠右）。 */
#mlist .mrow.mhr .minner::after{
  content:'';
  position:absolute;
  left:40px;
  right:0;
  top:50%;
  height:var(--hrw,var(--hrw0));
  transform:translateY(-50%);
  background:var(--hrc);
  border-radius:calc(var(--hrw,var(--hrw0)) / 2);
  pointer-events:none;
}

/* 分隔线这一行，右侧那一排小按钮全部让开 ——
   用 visibility 不用 display：**位置留着**，.minner 的宽度才不会撑大，
   线的右端就仍然停在普通行文字的那个右边界上。 */
#mlist .mrow.mhr .tkn,
#mlist .mrow.mhr .rdot,
#mlist .mrow.mhr .mkm,
#mlist .mrow.mhr .mnl,
#mlist .mrow.mhr .rdbtn{ visibility:hidden !important; }

/* 光标点进这一行（编辑时想改字符 / 想删）：线隐去，露出原来的 ===== */
#mlist .mrow.mhr:focus-within .minner::after{ opacity:0; }
#mlist .mrow.mhr:focus-within .mtext{ color:inherit !important; }

/* ---------------- 粗细：4 档（悬停 / 选中这条线才出现） ---------------- */
#mlist .mrow.mhr .hrw{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  display:none; align-items:center; gap:3px;
  padding:3px 6px; border-radius:999px;
  background:var(--bg,#fff); border:1px solid var(--line,#e3e6ea);
  box-shadow:0 2px 10px rgba(0,0,0,.10);
  z-index:4; cursor:default;
}
#mlist .mrow.mhr:hover .hrw,
#mlist .mrow.mhr:focus-within .hrw{ display:flex; }

#mlist .mrow.mhr .hrw b{
  display:block; width:16px; height:16px; border-radius:50%;
  background:var(--hov,#f2f4f6); cursor:pointer; position:relative;
  transition:background .12s, box-shadow .12s;
}
/* 圆点里那一小横：越粗的档，横线越厚 */
#mlist .mrow.mhr .hrw b::after{
  content:''; position:absolute; left:2px; right:2px; top:50%; transform:translateY(-50%);
  height:calc(var(--d,3px) * .7); background:var(--hrc); border-radius:2px;
}
#mlist .mrow.mhr .hrw b:hover{ background:var(--line,#e3e6ea); }
#mlist .mrow.mhr .hrw b.on{
  background:var(--hrc);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--hrc) 18%, transparent);
}
#mlist .mrow.mhr .hrw b.on::after{ background:var(--bg,#fff); }

/* ================= ★v3.441 目录树分隔线（业主 2026-10-31） =================
   业主原话：「目录树区也添加一个这样的线的功能」—— 跟正文那条一个规格：
   纯黑 · 比 1px 边框明显粗（默认 3px，四档 2/3/5/8）· 宽度跟着本层缩进 ·
   按住能拖到任意两行之间。
   线是**独立的一行**（.tnhr），画在 ::after 上 —— 不加 DOM、不改树的布局，
   所以展开 / 折叠 / 拖文件夹排序都不受影响。
   左端 = var(--hrl)（JS 按层级算 depth*14+14，跟这一层图标/文字的起点对齐）；
   右端 = 8px（行的右内边距）→ 合起来正好是这一层的行宽，越深越短。 */

#tbody .tnode.tnhr{
  position:relative;
  display:flex;align-items:center;gap:4px;
  height:15px;min-height:15px;
  padding:0 8px 0 6px;margin:1px 0;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:5px;
  cursor:grab;user-select:none;
}
#tbody .tnode.tnhr:hover{ background:var(--hov) !important; }
#tbody .tnode.tnhr.hrdrag{ opacity:.4; }
#tbody .tnode.tnhr.hron{ background:var(--hov) !important; }

/* 线本体 */
#tbody .tnode.tnhr::after{
  content:'';position:absolute;
  left:var(--hrl,20px);right:8px;top:50%;
  height:var(--hrw,3px);transform:translateY(-50%);
  background:var(--hrc,#000);
  border-radius:calc(var(--hrw,3px) / 2);
  pointer-events:none;
}

/* 左侧拖拽柄：平时藏着，移上来才露（不占视线） */
#tbody .tnode.tnhr .hrg{
  flex:0 0 12px;width:12px;text-align:center;
  font-size:11px;line-height:1;color:var(--sub);opacity:0;
}
#tbody .tnode.tnhr:hover .hrg{ opacity:.7; }

/* 右侧：4 档粗细 + ✕ 删除（只在鼠标移到这条线上时出现） */
#tbody .tnode.tnhr .hrctl{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:none;align-items:center;gap:3px;
  padding:2px 6px;border-radius:999px;
  background:var(--panel,#fff);border:1px solid var(--line,#e3e6ea);
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  z-index:5;cursor:default;
}
#tbody .tnode.tnhr:hover .hrctl,
#tbody .tnode.tnhr.hron .hrctl{ display:flex; }

#tbody .tnode.tnhr .hrctl b{
  display:block;width:15px;height:15px;border-radius:50%;
  background:var(--hov,#f2f4f6);cursor:pointer;position:relative;
  transition:background .12s;
}
#tbody .tnode.tnhr .hrctl b::after{
  content:'';position:absolute;left:2px;right:2px;top:50%;transform:translateY(-50%);
  height:calc(var(--d,3px) * .7);background:var(--hrc,#000);border-radius:2px;
}
#tbody .tnode.tnhr .hrctl b:hover{ background:var(--line,#e3e6ea); }
#tbody .tnode.tnhr .hrctl b.on{ background:var(--hrc,#000); }
#tbody .tnode.tnhr .hrctl b.on::after{ background:var(--panel,#fff); }

#tbody .tnode.tnhr .hrctl i{
  font-style:normal;font-size:11px;line-height:15px;
  color:var(--sub);cursor:pointer;padding:0 2px;
}
#tbody .tnode.tnhr .hrctl i:hover{ color:var(--danger,#d33); }

/* 拖动中：落点那一行头顶来一条蓝线，告诉你「松手就落在这儿」 */
#tbody .tnode.hrdrop{ box-shadow:inset 0 3px 0 var(--acc) !important; }

/* 手机上：行更高、手指点得到；粗细胶囊一直露着（没有 hover 这回事） */
@media (max-width:820px){
  #tbody .tnode.tnhr{ height:22px;min-height:22px; }
  #tbody .tnode.tnhr .hrg{ opacity:.55; }
  /* 手机没有 hover：点一下这条线，胶囊才出来（平时让线完整露着） */
  #tbody .tnode.tnhr .hrctl{ right:4px; }
  #tbody .tnode.tnhr.hron .hrctl{ display:flex; }
  #tbody .tnode.tnhr .hrctl b{ width:22px;height:22px; }
  #tbody .tnode.tnhr .hrctl i{ line-height:22px;font-size:13px;padding:0 6px; }
}

/* 栏头「插入分隔线」按钮：不写字，直接画一条小粗线 ——
   ▬ 这个字符在很多中文字体里会被渲染成怪方块（实测：蓝色方块，像是被选中了），所以用画的。 */
#tbody .tact-hr{ display:inline-flex;align-items:center;justify-content:center;height:19px;padding:0 7px;box-sizing:border-box; }
#tbody .tact-hr i{ display:block;width:14px;height:3px;border-radius:2px;background:currentColor; }
#tbody .tact-hr:hover i{ background:var(--acc); }


/* ================= ★v3.442 分隔线换色（业主 2026-10-31） =================
   原则：**默认不选色**，线就用站点主题色（--acc）。
   想换色才点胶囊里的色点 —— 选了就记住（节点 hc / treehr.c），老数据没有就继续用主题色，
   所以这次升级不会把已经画好的线变样，只是黑色换成了主题色。 */

/* 粗细点和色点之间那条竖杠，免得两排圆圈糊成一片 */
#mlist .mrow.mhr .hrw .hsep,
#tbody .tnode.tnhr .hrctl .hsep{
  width:1px;height:12px;flex:none;margin:0 3px;
  background:var(--line,#e3e6ea);
}

/* ---- 正文：7 个色点（主题 / 墨黑 / 红 / 橙 / 绿 / 紫 / 灰） ---- */
#mlist .mrow.mhr .hrw b.hcc{
  width:13px;height:13px;border-radius:50%;position:relative;
  background:var(--cc,var(--acc));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, #000 12%, transparent);
}
#mlist .mrow.mhr .hrw b.hcc::after{ content:none; }
#mlist .mrow.mhr .hrw b.hcc:hover{ transform:scale(1.18); }
#mlist .mrow.mhr .hrw b.hcc.on{
  background:var(--cc,var(--acc));
  box-shadow:0 0 0 2px var(--bg,#fff), 0 0 0 3.5px var(--cc,var(--acc));
}

/* ---- 目录树：同一套色点，小一号 ---- */
#tbody .tnode.tnhr .hrctl b.hcc{
  width:11px;height:11px;border-radius:50%;position:relative;
  background:var(--cc,var(--acc));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, #000 12%, transparent);
}
#tbody .tnode.tnhr .hrctl b.hcc::after{ content:none; }
#tbody .tnode.tnhr .hrctl b.hcc.on{
  background:var(--cc,var(--acc));
  box-shadow:0 0 0 2px var(--panel,#fff), 0 0 0 3px var(--cc,var(--acc));
}
@media (max-width:820px){
  #tbody .tnode.tnhr .hrctl b.hcc{ width:15px;height:15px; }
}