/* ================= ★v3.367 待办 / 待办清单 · 样式 =================
   为什么单独一个 css 文件：nginx 对 .css 是 max-age=86400，改老文件用户一天内看不到新样式
   （v3.312 的教训，写进铁律第 4 条）。
   配色口径：待读＝橙 #f08c00（圆点），待办＝绿 #2f9e44（方框勾选）。一眼分得清。
   类名 / id 一律 tk 前缀，跟待读的 rd 前缀不撞。 */

/* ================= 正文行尾的待办勾选框（v3.367 新增，主角） ================= */
.tkn {
  width: 15px; height: 15px; flex: 0 0 15px;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
  margin: 0 1px; position: relative; z-index: 2;
  cursor: pointer; vertical-align: middle;
  opacity: .34; transition: opacity .12s, transform .12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.mrow:hover .tkn, .tnode:hover .tkn, .r:hover .tkn { opacity: .8; }
.tkn:hover { opacity: 1 !important; transform: scale(1.12); }
.tkn::before {
  content: ''; width: 10px; height: 10px; border-radius: 3px;
  border: 1.5px solid var(--sub); background: transparent;
  transition: background .12s, border-color .12s;
}
/* 已经是待办（未完成）：绿色空勾框 */
.tkn.on { opacity: 1; }
.tkn.on::before { border-color: #2f9e44; background: rgba(47, 158, 68, .1); }
/* 已完成：绿色实心 + 白色对勾 */
.tkn.done { opacity: 1; }
.tkn.done::before { border-color: #2f9e44; background: #2f9e44; }
.tkn.done::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 3px; height: 6px; margin: -4px 0 0 -1.5px;
  border: solid #fff; border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg);
}
html.phone .tkn { width: 20px; flex: 0 0 20px; opacity: .6; }
html.phone .tkn::before { width: 13px; height: 13px; }
html.phone .tkn.done::after { width: 4px; height: 7px; margin: -5px 0 0 -2px; }

/* 完成的行：正文加删除线（纯视觉，一个字都不往文章里写） */
.mrow.tkd .mtext { text-decoration: line-through; opacity: .48; }
.mrow.tkd .mtext a, .mrow.tkd .mtext img { opacity: .6; }

/* ================= 顶栏「☑ 待办 N」 ================= */
#tkBtn {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid transparent; background: transparent;
  color: var(--sub); padding: 2px 7px; border-radius: 6px;
  font-size: 12px; line-height: 1.6; flex: 0 0 auto;
}
#tkBtn:hover { color: #2f9e44; border-color: #2f9e44; }
#tkBtn.on { color: var(--tx); background: var(--hov); border-color: var(--line); }
#tkBtn.over { color: #e03131; border-color: rgba(224, 49, 49, .45); background: rgba(224, 49, 49, .07); }
#tkBtn b { font-weight: 700; font-size: 11.5px; }
#tkBtn b:empty { display: none; }
#tkBtn .tkic { font-size: 13px; }
html.phone #tkBtn { padding: 2px 5px; }

/* ================= 待办清单面板 ================= */
#tkPane {
  position: fixed; z-index: 9800;
  right: 14px; top: 54px; width: 372px; max-width: calc(100vw - 20px);
  max-height: min(76vh, 640px);
  display: flex; flex-direction: column;
  background: var(--panel); color: var(--tx);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .18);
  font-size: 13px; overflow: hidden;
  animation: tkfade .14s ease-out;
}
@keyframes tkfade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
#tkPane .tkphd { display: flex; align-items: center; gap: 8px; padding: 11px 12px 9px; border-bottom: 1px solid var(--line); }
#tkPane .tkphd b { font-size: 14px; color: #2f9e44; }
#tkPane .tkphd i { font-size: 11px; color: var(--sub); font-style: normal; }
#tkPane .tkphd .tkpx { margin-left: auto; cursor: pointer; color: var(--sub); padding: 0 4px; font-size: 15px; }
#tkPane .tkphd .tkpx:hover { color: var(--tx); }

#tkPane .tkadd { display: flex; gap: 6px; padding: 9px 10px 8px; border-bottom: 1px solid var(--line); background: var(--hov); }
#tkPane .tkadd input {
  flex: 1; min-width: 0; font-size: 13px; padding: 7px 9px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel); color: var(--tx);
}
#tkPane .tkadd input:focus { outline: none; border-color: #2f9e44; }
#tkPane .tkadd button {
  flex: 0 0 auto; width: 34px; border-radius: 9px; font-size: 16px; line-height: 1;
  border: 1px solid #2f9e44; background: #2f9e44; color: #fff;
}
#tkPane .tkadd button:hover { opacity: .88; color: #fff; }

#tkPane .tkpb { flex: 1; overflow-y: auto; padding: 4px 6px 8px; }
#tkPane .tkpf { padding: 8px 12px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--sub); line-height: 1.6; }
#tkPane .tkpf .tkq { color: #e8590c; }
#tkPane .tkempty { padding: 26px 16px; text-align: center; color: var(--sub); line-height: 1.9; font-size: 12.5px; }

.tkgh { font-size: 11.5px; color: var(--sub); padding: 9px 8px 4px; display: flex; align-items: center; gap: 5px; }
.tkgh i { font-style: normal; opacity: .8; }
.tkgh.dg { color: var(--danger); }
.tkgh.td { color: #e8590c; }
.tkgh.nd { color: var(--sub); }
.tkgh.dnog { cursor: pointer; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; user-select: none; }
.tkgh.dnog:hover { color: var(--tx); }

.tkit { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; }
.tkit:hover { background: var(--hov); }
.tkit.late { background: rgba(224, 49, 49, .05); }
.tkit.dno { opacity: .55; }
.tkit.dno .tkmi b { text-decoration: line-through; }

.tkck {
  flex: 0 0 16px; width: 16px; height: 16px; border-radius: 5px;
  border: 1.6px solid var(--line); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; color: #fff; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.tkck:hover { border-color: #2f9e44; }
.tkck.on { background: #2f9e44; border-color: #2f9e44; }
html.phone .tkck { flex: 0 0 20px; width: 20px; height: 20px; font-size: 13px; }

.tkit .tkmi { flex: 1; min-width: 0; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.tkit .tkmi b { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.tkit .tkmi em { font-style: normal; font-size: 11.5px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 面板里标一下：这条是从正文某一行来的 */
.tkit .tknm { font-style: normal; font-size: 11px; color: #2f9e44; flex: 0 0 auto; }

.tkpri { display: inline-block; width: 3px; height: 12px; border-radius: 2px; flex: 0 0 3px; }
.tkpri.p3 { background: #e03131; }
.tkpri.p2 { background: #f08c00; }
.tkpri.p1 { background: #4c8fd8; }

.tkit .tkdue {
  font-style: normal; font-size: 11px; color: #2f9e44; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(47, 158, 68, .35); background: rgba(47, 158, 68, .08);
  padding: 1px 5px; border-radius: 5px;
}
.tkit .tkdue:hover { border-color: #2f9e44; }
.tkit .tkdue.late { color: #e03131; border-color: rgba(224, 49, 49, .35); background: rgba(224, 49, 49, .08); }
.tkit .tkdue.late:hover { border-color: #e03131; }

.tkit .tklk {
  font-size: 10.5px; color: var(--sub); cursor: pointer; white-space: nowrap;
  max-width: 88px; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; background: var(--bg);
}
.tkit .tklk:hover { color: var(--acc); border-color: var(--acc); }

.tkit .tkdg, .tkit .tkx {
  color: var(--sub); cursor: pointer; font-size: 12px; padding: 2px 3px; border-radius: 5px; flex: 0 0 auto;
  opacity: 0; transition: opacity .1s;
}
.tkit:hover .tkdg, .tkit:hover .tkx { opacity: 1; }
.tkit .tkdg:hover { color: #2f9e44; background: rgba(47, 158, 68, .1); }
.tkit .tkx:hover { color: var(--danger); background: rgba(217, 83, 79, .1); }
html.phone .tkit .tkdg, html.phone .tkit .tkx { opacity: .75; }

html.phone #tkPane { right: 6px; left: 6px; top: auto; bottom: 6px; width: auto; max-height: 78vh; }

/* ================= 行上右键 / 长按的小菜单 ================= */
#tkPop {
  position: fixed; z-index: 9940; width: 272px;
  background: var(--panel); color: var(--tx);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
  padding: 8px; font-size: 13px;
  animation: tkfade .12s ease-out;
}
#tkPop .tkph { padding: 3px 6px 7px; display: flex; flex-direction: column; gap: 2px; }
#tkPop .tkph b { font-size: 11.5px; color: #2f9e44; font-weight: 500; }
#tkPop .tkph span { font-size: 13px; color: var(--tx); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tkPop button {
  display: block; width: 100%; text-align: left;
  border: 1px solid transparent; background: transparent;
  padding: 7px 8px; border-radius: 8px; font-size: 13px; color: var(--tx);
}
#tkPop button:hover { background: var(--hov); color: var(--tx); }
#tkPop button.dg { color: var(--danger); }
#tkPop button.tkpol { color: var(--sub); font-size: 12px; }
#tkPop .tkpsep { font-size: 11.5px; color: var(--sub); padding: 7px 8px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
#tkPop .tkpqs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 0 4px; }
#tkPop .tkpqs.tkp3 { grid-template-columns: 1fr 1fr 1fr 1fr; }
#tkPop .tkpqs button { text-align: center; border: 1px solid var(--line); background: var(--hov); font-size: 12.5px; padding: 6px 4px; }
#tkPop .tkpqs button:hover { border-color: #2f9e44; color: #2f9e44; background: rgba(47, 158, 68, .08); }
#tkPop .tkpqs button.on { border-color: #2f9e44; background: rgba(47, 158, 68, .14); color: #2f9e44; font-weight: 600; }
#tkPop .tkpc { display: flex; gap: 5px; padding: 7px 4px 2px; }
#tkPop .tkpc input { flex: 1; min-width: 0; font-size: 12px; padding: 4px 6px; border-radius: 7px; }
#tkPop .tkpc button { width: auto; flex: 0 0 auto; border: 1px solid #2f9e44; color: #fff; background: #2f9e44; font-size: 12px; padding: 4px 9px; }
#tkPop .tkpc button:hover { color: #fff; opacity: .9; }
@media (max-width: 640px) {
  #tkPop { left: 8px !important; right: 8px !important; top: auto !important; bottom: 8px !important; width: auto; }
  #tkPop .tkpqs.tkp3 { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* ================= 新建 / 编辑小弹窗 ================= */
#tkEdit {
  position: fixed; z-index: 9960; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 400px; max-width: calc(100vw - 20px); max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  background: var(--panel); color: var(--tx);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .26);
  font-size: 13px; overflow: hidden;
  animation: tkpop .13s ease-out;
}
@keyframes tkpop { from { opacity: 0; transform: translate(-50%, -50%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
#tkEdit .tkeh { display: flex; align-items: center; padding: 11px 13px 9px; border-bottom: 1px solid var(--line); }
#tkEdit .tkeh b { font-size: 14px; color: #2f9e44; }
#tkEdit .tkeh .tkeX { margin-left: auto; cursor: pointer; color: var(--sub); padding: 0 4px; font-size: 15px; }
#tkEdit .tkeh .tkeX:hover { color: var(--tx); }
#tkEdit .tkeb { padding: 10px 13px 4px; overflow-y: auto; flex: 1; }
#tkEdit .tklb { display: block; font-size: 11.5px; color: var(--sub); margin: 8px 0 4px; }
#tkEdit .tklb:first-child { margin-top: 0; }
#tkEdit .tkin {
  width: 100%; box-sizing: border-box; font-size: 13px; padding: 7px 9px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel); color: var(--tx); font-family: inherit;
}
#tkEdit .tkin:focus { outline: none; border-color: #2f9e44; }
#tkEdit textarea.tkin { resize: vertical; min-height: 44px; }
#tkEdit .tkquick { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 5px; margin-bottom: 6px; }
#tkEdit .tkquick button {
  font-size: 11.5px; padding: 5px 2px; border-radius: 7px; text-align: center;
  border: 1px solid var(--line); background: var(--hov); color: var(--tx);
}
#tkEdit .tkquick button:hover { border-color: #2f9e44; color: #2f9e44; }
#tkEdit .tkpri3 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 5px; }
#tkEdit .tkpri3 button {
  font-size: 12px; padding: 6px 2px; border-radius: 7px; text-align: center;
  border: 1px solid var(--line); background: var(--hov); color: var(--tx);
}
#tkEdit .tkpri3 button:hover { border-color: #2f9e44; }
#tkEdit .tkpri3 button.on { font-weight: 600; }
#tkEdit .tkpri3 button.on[data-tkpri="0"] { border-color: #2f9e44; background: rgba(47, 158, 68, .12); color: #2f9e44; }
#tkEdit .tkpri3 button.on.p1 { border-color: #4c8fd8; background: rgba(76, 143, 216, .14); color: #4c8fd8; }
#tkEdit .tkpri3 button.on.p2 { border-color: #f08c00; background: rgba(240, 140, 0, .14); color: #f08c00; }
#tkEdit .tkpri3 button.on.p3 { border-color: #e03131; background: rgba(224, 49, 49, .14); color: #e03131; }
#tkEdit .tkref { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#tkEdit .tkref span {
  flex: 1; min-width: 90px; font-size: 12px; color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#tkEdit .tkref span i { color: var(--sub); font-style: normal; }
#tkEdit .tkref button {
  font-size: 11.5px; padding: 4px 8px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--hov); color: var(--tx);
}
#tkEdit .tkref button:hover { border-color: #2f9e44; color: #2f9e44; }
#tkEdit .tkef { display: flex; align-items: center; gap: 7px; padding: 10px 13px; border-top: 1px solid var(--line); }
#tkEdit .tkef .sp { flex: 1; }
#tkEdit .tkef button { font-size: 12.5px; padding: 6px 13px; border-radius: 8px; border: 1px solid var(--line); background: var(--hov); color: var(--tx); }
#tkEdit .tkef button:hover { border-color: var(--sub); }
#tkEdit .tkef button.pri { background: #2f9e44; border-color: #2f9e44; color: #fff; }
#tkEdit .tkef button.pri:hover { opacity: .9; color: #fff; }
#tkEdit .tkef button.tkdelb { color: var(--danger); border-color: rgba(217, 83, 79, .4); }
#tkEdit .tkef button.tkdelb:hover { background: rgba(217, 83, 79, .1); }
html.phone #tkEdit {
  left: 6px; right: 6px; top: auto; bottom: 6px; transform: none; width: auto;
  max-height: calc(100vh - 24px);
  animation: tkpop2 .13s ease-out;
}
@keyframes tkpop2 { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ================= 行尾 ⋯ 菜单里补的那一个入口 ================= */
.tksheet { display: contents; }