/* =============================================================
   demo.css — 在线体验版的补充样式（桌面版不加载）
   层级：引导 90 / 窄屏提示 85，都低于 modalRoot(120)，
        所以打开编辑弹窗时它们自动退到后面，不会挡住操作。
   ============================================================= */

/* 顶栏「在线体验」小标签 */
.vtag{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:20px;
  background:var(--brand-soft);color:var(--brand);
  font-size:10px;font-weight:600;letter-spacing:.2px;vertical-align:2px;
  font-style:normal;
}

/* ---------- 新手引导 ---------- */
.dg{
  position:fixed;right:22px;bottom:22px;width:336px;max-width:calc(100vw - 24px);
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-3);padding:13px 15px 12px;z-index:90;
  display:none;animation:dgIn .2s ease-out;
}
.dg.on{display:block}
@keyframes dgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.dg-h{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.dg-badge{
  font-size:10.5px;font-weight:600;color:var(--brand);
  background:var(--brand-soft);padding:2px 7px;border-radius:20px;
}
.dg-x{
  margin-left:auto;border:0;background:none;color:#9aa3b2;
  font-size:12px;line-height:1;cursor:pointer;padding:3px 5px;border-radius:5px;
}
.dg-x:hover{background:#f2f4f8;color:#5a6472}

.dg-body h4{margin:7px 0 5px;font-size:13.5px;font-weight:600;color:var(--ink)}
.dg-body p{margin:0;font-size:12.5px;line-height:1.8;color:#4d5766}

.dg-f{display:flex;align-items:center;gap:7px;margin-top:12px}
.dg-dots{display:flex;align-items:center;gap:4px;flex:1}
.dg-dots i{width:5px;height:5px;border-radius:50%;background:#d8dde7;transition:all .16s}
.dg-dots i.on{width:15px;border-radius:3px;background:var(--brand)}

.dg-btn{
  border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:7px;padding:5px 12px;font-size:12px;cursor:pointer;
}
.dg-btn:hover{background:#f6f8fc}
.dg-btn.ghost{color:#78818f;border-color:transparent}
.dg-btn.ghost:hover{background:#f2f4f8}
.dg-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.dg-btn.primary:hover{background:var(--brand-2)}

/* ---------- 窄屏提示条 ---------- */
.ntip{
  position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:85;
  display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);
  background:#1f2733;color:#fff;border-radius:20px;
  padding:7px 7px 7px 15px;font-size:12px;line-height:1.5;
  box-shadow:0 10px 30px -12px rgba(16,24,40,.5);
}
.ntip span{flex:1;min-width:0}
.ntip-x{
  border:0;background:rgba(255,255,255,.16);color:#fff;
  border-radius:14px;padding:3px 10px;font-size:11.5px;cursor:pointer;white-space:nowrap;
}
.ntip-x:hover{background:rgba(255,255,255,.26)}

/* ---------- 触摸 ----------
   不设的话，手机上按住色块拖动会被浏览器当成滚页面，拖拽直接失效 */
.bar,.h{touch-action:none}

/* ---------- 窄屏瘦身 ---------- */
/* 侧栏靠 CSS 硬收：手机的窄屏下双栏会把时间轴挤没。
   这里不改 S.ui，所以在电脑上打开时侧栏状态不受影响。 */
@media (max-width:900px), (max-width:1100px) and (hover:none) and (pointer:coarse){
  .side.right{display:none !important}
}
@media (max-width:700px), (max-width:1100px) and (hover:none) and (pointer:coarse){
  .side.left{display:none !important}
  #reopenLeft,#reopenRight{display:none !important}
}
@media (max-width:980px){
  .zoomer.rowz{display:none}
  .vtag{display:none}
}
@media (max-width:760px){
  .dg{left:12px;right:12px;bottom:12px;width:auto;max-width:none}
  .zoomer.topz{display:none}
  #spanSeg{display:none}
  .ntip{bottom:auto;top:58px;left:8px;right:8px;transform:none;max-width:none;font-size:11.5px;border-radius:10px}
}
@media (max-width:560px){
  .brandTxt .t1{font-size:12px}
  .histgrp{display:none}
  .dg{padding:11px 13px}
  .dg-body p{font-size:12px;line-height:1.7}
}

/* =============================================================
   底部收尾条 + 右下角「重点关注」卡片
   ============================================================= */
.ganttwrap{position:relative}

/* 收尾条：不滚动，常驻甘特区底部，让页面有"到底了"的收口 */
.endbar{
  position:absolute;left:0;right:0;bottom:0;height:38px;z-index:55;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0 16px;background:#fff;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink-3);pointer-events:none;white-space:nowrap;
}
.endbar-l b{color:var(--ink);font-weight:600}
.endbar-r{overflow:hidden;text-overflow:ellipsis}

/* 给收尾条让出高度，最后一行不会被压住 */
.gscroll.has-endbar{padding-bottom:38px}

/* ---- 重点关注 ---- */
.memo{
  position:absolute;right:12px;bottom:46px;width:208px;z-index:64;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-2);overflow:hidden;
}
.memo-h{
  display:flex;align-items:center;gap:6px;height:30px;padding:0 8px 0 10px;
  background:#fbfcfe;border-bottom:1px solid var(--line);
  cursor:move;user-select:none;-webkit-user-select:none;touch-action:none;
}
/* 六点握把：明示这里能拖 */
.memo-grip{
  flex:none;width:8px;height:12px;margin-right:-1px;
  background-image:radial-gradient(currentColor 1px, transparent 1.1px);
  background-size:4px 4px;background-position:0 1px;
  color:#c3ccda;
}
.memo-h:hover .memo-grip{color:#7f8b9e}
.memo.dragging{
  z-index:96;box-shadow:0 12px 28px rgba(16,24,40,.18);
  outline:1px solid rgba(46,107,214,.35);
}
.memo.dragging .memo-h{cursor:grabbing}
.memo-t{font-size:11.5px;font-weight:600;color:var(--ink);letter-spacing:.2px}
.memo-n{
  min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--danger-soft,#fef3f2);color:var(--danger,#d92d20);
  font-size:10.5px;line-height:16px;text-align:center;font-weight:600;
}
.memo-fold{
  margin-left:auto;border:0;background:none;color:#9aa3b2;cursor:pointer;
  font-size:14px;line-height:1;padding:2px 4px;border-radius:5px;
}
.memo-fold:hover{background:#eef1f6;color:#5a6472}

.memo-b{max-height:196px;overflow:auto;padding:4px 0}
.memo-row{
  display:flex;align-items:flex-start;gap:6px;padding:4px 8px 4px 10px;
  font-size:12px;line-height:1.5;color:#3d4757;
}
.memo-row:hover{background:#f7f9fc}
.memo-dot{
  flex:none;width:11px;height:11px;margin-top:3px;border-radius:50%;
  border:1.5px solid #c3ccda;background:#fff;cursor:pointer;transition:all .15s;
}
.memo-row:hover .memo-dot{border-color:var(--ok,#12b76a)}
.memo-x1{flex:1;min-width:0;cursor:pointer;word-break:break-all}
.memo-who{
  flex:none;max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-style:normal;font-size:10.5px;color:#8a94a6;
  background:#f2f4f8;border-radius:4px;padding:0 4px;margin-top:1px;
  cursor:text;
}
.memo-who:hover{background:#e8edf6;color:#5a6472}
.memo-edit-btn{
  flex:none;border:0;background:none;color:#c3ccda;font-size:10.5px;line-height:1;
  cursor:pointer;padding:1px 2px;border-radius:4px;opacity:0;transition:opacity .12s;
}
.memo-row:hover .memo-edit-btn{opacity:1}
.memo-edit-btn:hover{background:#eaf1fd;color:#2e6bd6}

/* 触屏没有 hover，编辑按钮别藏起来 */
@media (hover:none){
  .memo-edit-btn{opacity:1}
}

/* 行内编辑 */
.memo-row.editing{display:block;padding:6px 8px;background:#f7f9fc}
.memo-edit{display:flex;flex-direction:column;gap:4px}
.memo-edit input{
  width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:6px;
  background:#fff;font-size:12px;line-height:1.5;color:var(--ink);
  padding:2px 6px;outline:0;
}
.memo-edit input::placeholder{color:#b6bdc9}
.memo-edit input:focus{border-color:#2e8bff;box-shadow:0 0 0 2px rgba(46,139,255,.14)}
.memo-eb{display:flex;gap:5px;justify-content:flex-end;align-items:center}
.memo-eb button{
  border:1px solid var(--line);background:#fff;border-radius:5px;
  font-size:11px;line-height:1.6;padding:0 8px;color:#5a6472;cursor:pointer;
}
.memo-eb button:hover{background:#f2f5fa}
.memo-eb .memo-ok{background:#2e6bd6;border-color:#2e6bd6;color:#fff}
.memo-eb .memo-ok:hover{background:#2559b6}
.memo-eb .memo-eb-del{margin-right:auto;color:#c0392b;border-color:#f0d5d1}
.memo-eb .memo-eb-del:hover{background:#fdecec;color:#c0392b}

.memo-row.done .memo-dot{background:var(--ok,#12b76a);border-color:var(--ok,#12b76a)}
.memo-row.done .memo-x1{text-decoration:line-through;color:#a6aebb}

.memo-empty{font-size:11.5px;color:#a6aebb;padding:6px 12px}

.memo-add{border-top:1px solid var(--line);padding:5px 8px}
.memo-add input{
  width:100%;border:0;outline:0;background:none;font-size:12px;color:var(--ink);
  padding:2px 2px;
}
.memo-add input::placeholder{color:#b6bdc9}

/* 折叠后的小胶囊 */
.memo-mini{
  position:absolute;right:12px;bottom:46px;z-index:64;
  border:1px solid var(--line);background:#fff;border-radius:20px;
  padding:6px 12px;font-size:11.5px;color:#4d5766;cursor:pointer;
  box-shadow:var(--shadow-2);
}
.memo-mini b{color:var(--danger,#d92d20);font-weight:600;margin-left:2px}
.memo-mini:hover{background:#f7f9fc}

/* 新手引导卡在右下角时，把这块整体抬高，别叠在一起 */
body.has-guide .memo,
body.has-guide .memo-mini{bottom:252px}

/* 窄屏：卡片缩一点，别把时间轴挡太多 */
@media (max-width:900px){
  .memo{width:186px;right:10px;bottom:48px}
  .memo-b{max-height:150px}
  .endbar{font-size:11px;padding:0 10px}
  .endbar-r{display:none}
}
@media (max-width:700px), (max-width:1100px) and (hover:none) and (pointer:coarse){
  .memo{bottom:44px}
  body.has-guide .memo,
  body.has-guide .memo-mini{bottom:auto;top:96px}
}

/* =============================================================
   手机形态（<=700px）：默认任务卡片列表，甘特图作为第三种视图
   ============================================================= */
.mob{display:none;flex:1;min-height:0;flex-direction:column;background:#fff}

@media (max-width:700px), (max-width:1100px) and (hover:none) and (pointer:coarse){
  #mobView{display:flex}
  /* 分段栏常驻：切到甘特图也能切回来（以前切过去就被藏了，出不来） */
  body.mob-chart #mobView{flex:none}
  body.mob-chart .mob-list{display:none}
  body:not(.mob-chart) #gscroll{display:none}
  body:not(.mob-chart) .endbar{display:none}
  body:not(.mob-chart) .gtool{display:none}
  body.mob-chart .gtool{display:none}      /* 统计/搜索这些桌面件让位，底部工具坞里有了 */
  body.mob-chart .endbar{display:none}     /* 底部交给工具坞 */

  /* 顶栏瘦身：只留 logo、年月、＋、更多 */
  .brandTxt .t2{display:none}
  .brandTxt .t1{font-size:13px}
  .vtag{display:none}
  #todayBtn{display:none}
  #spanSeg{display:none}
  .zoomer{display:none}
  .histgrp{display:none}
  #newBtn{width:34px;padding:0;justify-content:center;gap:0;font-size:0}
  #newBtn svg{width:15px;height:15px}
  .datepick select{padding:4px 2px;font-size:12px}
  .datepick .sep2{display:none}

  /* 甘特图模式：左列由 JS 按屏宽算（--labelw 内联在 body 上），这里只做紧凑化 */
  body.mob-chart .row .lab{
    padding:0 4px 0 7px;gap:4px;
  }
  body.mob-chart .row .lab .pd{
    width:13px;font-size:8.5px;padding:0;text-align:center;
  }
  body.mob-chart .row .nm{
    font-size:10.5px;line-height:13px;white-space:normal;
    max-height:26px;overflow:hidden;word-break:normal;
  }
  body.mob-chart .row .sub{
    font-size:9px;line-height:1.25;margin-top:1px;
  }
  body.mob-chart .row .sub .sp{margin:0 2px}
  body.mob-chart .row .lab .del{display:none}     /* 手机上别放删除按钮，容易误触 */
  body.mob-chart .row .lab .ck{width:15px;height:15px}

  /* 左列收起按钮（长在「任务/计划」角标里） */
  body.mob-chart .g-head .corner{padding:0 3px 0 7px;gap:0;font-size:10px;overflow:hidden}
  body.mob-chart .g-head .corner .nt{display:none}
  body.mob-chart .labfold{
    margin-left:auto;flex:none;width:18px;height:18px;padding:0;
    border:1px solid var(--line);border-radius:5px;background:#fff;color:#5a6472;
    font-size:12px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  body.mob-chart .labfold:active{background:#eef3fb}
  /* 收起后就只剩一条窄缝，只留优先级色标，时间轴吃满 */
  body.mob-chart.lab-fold .g-head .corner{padding:0;justify-content:center;font-size:0}
  body.mob-chart.lab-fold .g-head .corner>span{display:none}
  body.mob-chart.lab-fold .labfold{margin:0}
  body.mob-chart.lab-fold .row .lab{padding:0;justify-content:center;gap:0}
  body.mob-chart.lab-fold .row .lab .nmwrap,
  body.mob-chart.lab-fold .row .lab .ck{display:none}

  /* 色块加粗：手指点得准；再叠一层隐形热区，比看起来更好按 */
  body.mob-chart .bar{
    height:clamp(18px,calc(var(--rowh) - 18px),30px);
    border-radius:5px;padding:0 4px;
    touch-action:pan-y;                            /* 上下滑还能滚，横拖交给长按 */
  }
  body.mob-chart .bar::before{
    content:'';position:absolute;left:-3px;right:-3px;top:-6px;bottom:-6px;
    border-radius:8px;
  }
  body.mob-chart .bar.press{
    outline:2px dashed var(--brand,#2e8bff);outline-offset:2px;
    filter:brightness(1.06);
  }
  body.mob-chart .bar .h{width:12px}
  body.mob-chart .bar .bt{font-size:10px}
  body.mob-chart .bar .dl,.body.mob-chart .bar .badge{display:none}
  /* 长按时别让系统弹「文本选择 / 保存图片」这类原生浮层 */
  body.mob-chart .bar,
  body.mob-chart .row .lab{
    -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  }
  /* 列头那天数太多，手机上隔天标一个 */
  body.mob-chart .drow .d-label span:first-child{font-size:9.5px}

  body.mob-chart .memo{bottom:calc(var(--dockh,40px) + 44px)}   /* 让开底部工具坞 */
  body.mob-chart .memo-mini{bottom:calc(var(--dockh,40px) + 44px)}
}

/* ---------------- 底部工具坞（甘特图模式） ---------------- */
.mdock{display:none}
body.mob-chart .mdock{
  display:flex;flex-direction:column;flex:none;
  border-top:1px solid var(--line);background:#fff;
}
.mdock-b{
  max-height:34vh;overflow-y:auto;overscroll-behavior:contain;
  border-bottom:1px solid var(--line-2);background:#fbfcfe;
}
.mdock-tabs{display:flex;flex:none;height:40px}
.mdock-tabs button{
  flex:1;border:0;background:#fff;font-size:12px;color:#5a6472;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:4px;
}
.mdock-tabs button + button{border-left:1px solid var(--line-2)}
.mdock-tabs button b{
  font-size:10.5px;font-weight:700;color:#fff;background:#c3ccda;
  border-radius:9px;padding:0 5px;line-height:15px;min-width:15px;text-align:center;
}
.mdock-tabs button.on{color:var(--brand,#2e8bff);font-weight:600;background:#f4f8ff}
.mdock-tabs button.on b{background:var(--brand,#2e8bff)}

.ditem{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-bottom:1px solid var(--line-2);cursor:pointer;
}
.ditem:active{background:#eef3fb}
.ditem i{width:4px;height:26px;border-radius:2px;flex:none}
.dm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dt{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds{font-size:10.5px;color:#8a94a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp{font-style:normal;font-size:10px;color:#8a94a6;background:#f2f4f8;border-radius:4px;padding:0 5px}
.dempty{padding:18px 12px;text-align:center;color:#a6aebb;font-size:12px}

.dstat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2)}
.dstat>div{background:#fff;padding:10px 6px;text-align:center}
.dstat b{display:block;font-size:17px;color:var(--ink);line-height:1.2}
.dstat span{font-size:10.5px;color:#8a94a6}
.dstat .warn b{color:var(--danger,#d92d20)}
.dhint{padding:9px 12px;font-size:10.5px;color:#a6aebb;background:#fff}

/* 分段切换 */
.mob-seg{
  display:flex;gap:5px;padding:7px 10px;background:#fbfcfe;
  border-bottom:1px solid var(--line);flex:none;
}
.mob-seg button{
  flex:1;border:0;background:#eef1f6;border-radius:8px;
  padding:7px 0;font-size:12px;color:#5a6472;cursor:pointer;
}
.mob-seg button.on{background:var(--brand);color:#fff;font-weight:600}

/* 列表 */
.mob-list{
  flex:1;min-height:0;overflow-y:auto;padding-bottom:56px;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.msec{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:6px;
  padding:7px 12px 5px;background:#f7f9fc;border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:600;color:#5a6472;
}
.msec em{font-style:normal;font-weight:400;font-size:11px;color:#98a1b0}
.msec.warn{color:var(--danger,#d92d20)}
.msec.warn em{color:#e08a84}

.mcard{
  display:flex;align-items:stretch;background:#fff;cursor:pointer;
  border-bottom:1px solid var(--line);
}
.mcard:active{background:#f6f8fc}
.mbar{width:4px;flex:none;border-radius:0 2px 2px 0}
.mmain{flex:1;min-width:0;padding:9px 10px 9px 10px}
.mrow1{display:flex;align-items:center;gap:6px}
.mprio{flex:none;width:19px;font-size:10.5px;font-weight:700}
.mt1{
  flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mrow2{
  margin-top:3px;font-size:11.5px;color:#7c8698;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mflags{display:flex;gap:3px;flex:none}
.mf{
  font-style:normal;font-size:10px;line-height:16px;padding:0 5px;
  border-radius:9px;background:#f2f4f8;color:#7c8698;white-space:nowrap;
}
.mf.late{background:var(--danger-soft,#fef3f2);color:var(--danger,#d92d20)}
.mf.df{background:#fef7e6;color:#b7791f}
.mf.dn{background:var(--ok-soft,#dcf7e7);color:var(--ok-ink,#0b7a4b)}

.mcard.done .mt1{text-decoration:line-through;color:#a6aebb}
.mcard.defer{opacity:.72}
.mempty{padding:40px 20px;text-align:center;color:#a6aebb;font-size:12.5px}

/* 手机上「重点关注」收成一个圆钮，别压住列表最后一条 */
@media (max-width:700px), (max-width:1100px) and (hover:none) and (pointer:coarse){
  .memo-mini{
    width:38px;height:38px;padding:0;border-radius:50%;
    font-size:0;right:12px;bottom:12px;display:flex;
    align-items:center;justify-content:center;
  }
  .memo-mini b{font-size:13px;margin:0;line-height:1}
  .mob-list{padding-bottom:68px}
  /* 展开时贴边但不遮满屏 */
  .memo{width:calc(100% - 24px);left:12px;right:12px;bottom:12px}
  .memo-b{max-height:40vh}
}