/* 面板 · 待办清单 的样式（pages/todo.js，放在首页里）。归 M4 触达。只写这一块自己的类，类名带前缀 tdp-；共用的在 shell.css（一行待办 tk-、区块 sec-）。
   样子照 docs/mockups/dashboard-v2.html 的「待办」：小标题一行，卡片下面一行「已完成 N ›」。 */
.tdp > * + * { margin-top: 14px; }
.tdp > .tdp-list + * { margin-top: 22px; }
.tdp-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tdp-h h2 { margin: 0; font-size: 20px; }
.tdp-list > .tdp-more, .tdp-list > .tdp-mores { margin-top: 14px; }
.tdp-mores { display: flex; flex-wrap: wrap; gap: 6px 22px; }   /* 「已完成 N ›」「成绩 ›」排一行 */
.tdp-empty { padding: 28px 8px; text-align: center; }
a.tdp-more { display: flex; width: max-content; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; text-decoration: none; }
a.tdp-more:hover { color: var(--ink); text-decoration: none; }
.tdp-more .ic { width: 15px; height: 15px; }
.tdp-n { color: var(--faint); font-variant-numeric: tabular-nums; }
/* 演示那一块（demo.js）：标题后面跟着截止时间的小标签，下面一句说明 */
.tdp .demo-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tdp .demo-h + .u-lead { margin-top: 4px; }
.tdp .demo-h ~ .row { margin-top: 14px; }
.tdp-nt:not(:empty) { margin-top: 22px; }
.tdp-nt > * + * { margin-top: 12px; }

/* 首页待办、通知：用各自底色铺满行，低优先级变量不盖住选中状态 */
.hm-page .tdp-list > .sec-box { background: var(--home-todo-bg); border-color: var(--home-todo-line); }
:where(.hm-page .tdp-list) .tk-row { --row-bg: var(--home-todo-bg); border-top-color: var(--home-todo-line); }
.hm-page .tdp-nt > .sec-box { background: var(--home-notice-bg); border-color: var(--home-notice-line); }
:where(.hm-page .tdp-nt) .tk-row { --row-bg: var(--home-notice-bg); border-top-color: var(--home-notice-line); }
.hm-page .tdp-list .tk-sec:has(> .tk-sg) {
  padding: 12px; border: 1px solid var(--home-ask-line); border-radius: var(--radius-sm); background: var(--home-ask-bg);
}
:where(.hm-page .tdp-list .tk-sec:has(> .tk-sg)) .tk-row { --row-bg: var(--home-ask-bg); border-top-color: var(--home-ask-line); }