/* ============================================================
   view-tasks.css · 待办
   二级栏是分段切换（.nav-item + 计数气泡），主区一次只渲染一个分段：
   我的待办 / 待你确认 / AI 进行中 / 定制任务
   .tk-page 让每个分段自己占满剩余高度，页面本身不滚动。
   颜色、字号、圆角全部取自 tokens.css。
   ============================================================ */

/* ---------------- 二级栏 ---------------- */
.tk-nav { width: 100%; text-align: left; }
.tk-nav .count { font-size: var(--fs-11); }

/* ---------------- 分段骨架 ---------------- */
/* 视口内容高 = 100vh - 顶栏 - viewport__inner 的上下内边距（22 + 40） */
.tk-page {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--topbar-h) - 62px);
}
.tk-head {
  flex: none;
  display: flex; align-items: flex-start; gap: 16px;
  padding-bottom: 13px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.tk-head__main { flex: 1; min-width: 0; }
.tk-head__t {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--fs-16); font-weight: 700;
  color: var(--text); line-height: 1.35;
}
.tk-head__t .ico { color: var(--brand-600); }
.tk-head__d { font-size: var(--fs-12); color: var(--text-3); margin-top: 3px; }
.tk-sort { flex: none; }

.tk-body { flex: 1; min-height: 0; overflow: auto; padding-right: 2px; }
/* 空态：在剩余高度里居中 */
.tk-body--center { display: grid; place-items: center; }

/* ---------------- 1. 我的待办 ---------------- */
.tk-list { overflow: hidden; }

.tk-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  transition: background .14s var(--ease), opacity .28s var(--ease);
}
.tk-row:last-child { border-bottom: 0; }
.tk-row:hover { background: var(--surface-2); }
.tk-row.is-checked { opacity: .34; }
.tk-row.is-done { background: var(--surface-2); }

.tk-row__main { flex: 1; min-width: 0; }
.tk-row__title { font-size: var(--fs-13); color: var(--text); line-height: 1.5; }
.tk-row.is-done .tk-row__title,
.tk-row.is-checked .tk-row__title {
  color: var(--text-4); text-decoration: line-through;
}
.tk-row__meta { display: flex; align-items: center; gap: 9px; margin-top: 3px; min-width: 0; }

/* 圆形勾选框：主交互，点一下即完成 */
.tk-check {
  width: 22px; height: 22px; flex: none;
  margin-top: 1px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line-dark);
  background: var(--surface);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  position: relative;
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .14s var(--ease-out);
}
/* 这是待办页的主交互：视觉上 22px，点击区域扩到 30×30（WCAG 2.2 至少 24×24） */
.tk-check::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%;
}
.tk-check:hover { border-color: var(--brand-400); background: var(--brand-50); }
.tk-check:active { transform: scale(.9); }
.tk-check__mark {
  display: grid; place-items: center;
  opacity: 0; transform: scale(.4);
  transition: opacity .16s var(--ease), transform .22s var(--ease-out);
}
.tk-check.is-static { background: var(--success); border-color: var(--success); opacity: .65; }
.tk-check.is-static .tk-check__mark { opacity: 1; transform: none; }

.tk-row.is-checked .tk-check { background: var(--success); border-color: var(--success); }
.tk-row.is-checked .tk-check__mark { opacity: 1; transform: none; }
.tk-row.is-checked .tk-check { animation: tkPop .3s var(--ease-out) both; }
@keyframes tkPop {
  0%   { transform: scale(.62); }
  62%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}

.tk-due {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-11); color: var(--text-4); flex: none;
}
.tk-due--urgent { color: var(--danger); font-weight: 600; }
.tk-skill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-11); color: var(--text-3); flex: none;
}
.tk-skill .ico { color: var(--brand-500); }
.tk-hint {
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 0; flex: 0 1 auto;
  font-size: var(--fs-11); color: var(--text-4);
}
.tk-hint .ico { color: var(--violet); flex: none; }
.tk-hint > .truncate { min-width: 0; }

/* 「交给 AI」默认隐身：只在行 hover 或键盘聚焦时淡入 */
.tk-ai {
  flex: none;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity .16s var(--ease), transform .16s var(--ease-out);
}
.tk-row:hover .tk-ai,
.tk-row:focus-within .tk-ai { opacity: 1; transform: none; }
@media (hover: none) {
  .tk-ai { opacity: 1; transform: none; }
}

/* 已完成折叠区 */
.tk-done__toggle {
  display: flex; align-items: center; gap: 7px;
  width: 100%;
  margin-top: 12px;
  padding: 7px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: var(--fs-12);
  cursor: pointer;
  transition: color .14s var(--ease), background .14s var(--ease);
}
.tk-done__toggle:hover { color: var(--text-2); background: var(--surface-3); }
.tk-done__caret { transition: transform .18s var(--ease); }
.tk-done__toggle.is-open .tk-done__caret { transform: rotate(180deg); }
.tk-done__list {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

/* ---------------- 2. 待你确认 ---------------- */
.tk-warn {
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  border-color: var(--warn-bd);
  box-shadow: var(--sh-2);
}
.tk-warn:last-child { margin-bottom: 0; }
.tk-warn::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--warn);
}
.tk-warn__head {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 16px 0 18px;
}
.tk-warn__ico { width: 34px; height: 34px; border-radius: var(--r-md); }
.tk-warn__main { flex: 1; min-width: 0; }
.tk-warn__title { font-size: var(--fs-14); font-weight: 600; color: var(--text); line-height: 1.45; }
.tk-warn__sub {
  display: flex; align-items: center; gap: 5px;
  flex-wrap: wrap;
  font-size: var(--fs-12); color: var(--warn);
  margin-top: 4px;
}
.tk-warn__dot { color: var(--warn-bd); }

/* 影响范围就地展开，不藏在弹窗里 */
.tk-impact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 12px 16px 0 18px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.tk-impact__i { background: var(--surface-2); padding: 8px 11px; min-width: 0; }
/* 奇数个时最后一项拉通整行，避免半格留白 */
.tk-impact__i:nth-child(odd):last-child { grid-column: 1 / -1; }
.tk-impact__k { font-size: var(--fs-11); color: var(--text-4); }
.tk-impact__v { font-size: var(--fs-12); color: var(--text-2); margin-top: 3px; }

.tk-warn__foot {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px 12px 18px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ---------------- 3. AI 进行中 ---------------- */
.tk-run {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  transition: background .14s var(--ease);
}
.tk-run:last-child { border-bottom: 0; }
.tk-run:hover { background: var(--surface-2); }
.tk-run__ico { width: 26px; height: 26px; border-radius: var(--r-sm); }
.tk-run__main { flex: 1; min-width: 0; }
.tk-run__title { font-size: var(--fs-13); font-weight: 600; color: var(--text); }
.tk-run__meta { display: flex; align-items: center; gap: 10px; margin-top: 5px; min-width: 0; }
.tk-run__stage { flex: 0 1 auto; min-width: 0; font-size: var(--fs-12); color: var(--text-3); }
/* 进度条撑满行内剩余空间，不写死宽度 */
.tk-run__bar { flex: 1 1 auto; min-width: 110px; }
.tk-run__pct {
  flex: none; font-size: var(--fs-11); color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.tk-run__eta {
  display: inline-flex; align-items: center; gap: 4px;
  flex: none; font-size: var(--fs-11); color: var(--text-4);
}
.tk-run__auto { flex: none; font-size: var(--fs-11); color: var(--text-4); }

/* ---------------- 4. 定制任务 ---------------- */
.tk-ct-grid { align-content: start; }
/* 开关在这个视图里是 <button>，去掉浏览器默认外观 */
.tk-ct-card .switch { border: 0; padding: 0; appearance: none; }
.ct-card.is-active { border-color: var(--brand-300); box-shadow: var(--ring); }

.tk-pipe { display: flex; flex-direction: column; gap: 5px; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1180px) {
  .tk-row__meta { flex-wrap: wrap; gap: 6px 9px; }
  .tk-head { flex-wrap: wrap; }
  .tk-impact { grid-template-columns: minmax(0, 1fr); }
  .tk-impact__i:nth-child(odd):last-child { grid-column: auto; }
  .tk-run__bar { display: none; }
  .tk-warn__foot { flex-wrap: wrap; }
}