[css] 移动端列表紧凑显示，仿 logseq

多层级列表在思源移动端显示的信息密度不够，主要是!列表不同层级间的距离太大，造成 3 级以上列表在移动端看上去很松散。

用 ai 写的，仿 logseq-md 移动端调的

效果图：

代码：

/* ===== 仅移动端生效 ===== */
@media (max-width: 768px) {
  /* 1. 基本压紧：只动 padding / margin，不动 min-height */
  .protyle-wysiwyg .li {
    padding: 0 !important;
    margin: 1px 0 !important;
    line-height: 1.625 !important;
    /* min-height 保留，保证热区 */
  }
  .protyle-wysiwyg .li > [data-node-id] {
    margin: 0 0 0 22px !important;
    padding: 0 !important;
  }
  .protyle-wysiwyg .li > .protyle-action {
    width: 22px !important;
    height: 1.625em !important;
    line-height: 1.625em !important;
  }
  .protyle-wysiwyg .li [spellcheck] {
    line-height: 1.625 !important;
  }

  /* 2. 竖线对齐 */
  .protyle-wysiwyg .li::before {
    left: 10px !important;
    top: calc(1.625em + 2px) !important;
    height: calc(100% - 1.625em - 4px) !important;
  }

  /* 3. 展开动画期间临时放开高度，120ms 后收回 */
  .protyle-wysiwyg .li.protyle-wysiwyg--hl {
    min-height: auto !important;
  }
  .protyle-wysiwyg .li:not([fold="1"]) {
    animation: mobileLiExpand 0s 120ms forwards;
  }
  @keyframes mobileLiExpand {
    to { min-height: 1.625em; }
  }
}