/* Unitick · 待办清单和日历详情（todo.js、pages/home.js 的日历，docs/specs/calendar-todo.md）。归 M1 平台。
   类名都带 td- 前缀；颜色、圆角用 app.css 的变量。月历格子本身沿用 app.css 的 cal- 那一套，这里只补新加的。 */
:root { --td-own: #0f8b8d; --td-late: var(--red); }

/* ---------------------------------------------------------------- 圆圈：点了打勾 */
.td-ck { position: relative; flex: none; width: 22px; height: 22px; min-width: 0; margin: 1px 0 0; padding: 0; border: 1.6px solid #b8b8be;
  border-radius: 50%; background: var(--panel); cursor: pointer; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.td-ck::after { content: ""; position: absolute; left: 6.5px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transition: transform .18s ease; }
:where(button).td-ck:hover:not(:disabled) { border-color: var(--ink); background: var(--soft); }
.td-ck.is-late { border-color: var(--td-late); }
.td-ck.is-q { border-color: var(--yellow); }
.td-ck.is-on, :where(button).td-ck.is-on:hover:not(:disabled) { border-color: var(--ink); background: var(--ink); }
.td-ck.is-on::after { transform: rotate(45deg) scale(1); }
.td-ck.is-ign, :where(button).td-ck.is-ign:hover:not(:disabled) { border-color: var(--faint); background: var(--faint); }
.td-ck.is-pop { animation: td-pop var(--dur-3) var(--ease-bounce); }
.td-ck:disabled { opacity: 1; cursor: default; }
@keyframes td-pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
span.td-ck-ro { display: inline-block; border-style: dashed; border-color: var(--orange); cursor: default; }   /* 滴答的任务：只看，去滴答里勾 */
@media (pointer: coarse) { .td-ck { width: 24px; height: 24px; } .td-ck::after { left: 7.5px; top: 3.5px; } }

/* ---------------------------------------------------------------- 一行 */
.td-row, .td-ext { display: flex; align-items: flex-start; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--line); }
.td-sec > .td-row:first-of-type, .td-sec > .td-ext:first-of-type, .td-sec-h + .td-row, .td-sec-h + .td-ext { border-top: 0; }
.td-row-b { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; text-align: left; font-weight: 400; color: var(--text); cursor: pointer; }
:where(button).td-row-b:hover:not(:disabled) { background: none; }
:where(button).td-row-b:hover .td-row-t { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--line-2); }
.td-ext-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.td-row-t { color: var(--ink); font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere;
  background: linear-gradient(currentColor, currentColor) 0 55% / 0 1px no-repeat; transition: background-size .3s ease, color .3s ease; }
.td-row-m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.td-row-m > span:not(.td-tag) + span:not(.td-tag)::before { content: "·"; margin: 0 6px; color: var(--faint); }
.td-row-m > .td-tag { margin-left: 8px; }
.td-late { color: var(--td-late); }
.td-row.is-done .td-row-t { color: var(--muted); background-size: 100% 1px; }
.td-row.is-going { animation: td-go .45s ease .3s forwards; overflow: hidden; }
@keyframes td-go { to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-color: transparent; } }
.td-row.is-going { max-height: 120px; }
.td-tag { display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; line-height: 1;
  color: var(--muted); background: var(--soft); border: 1px solid var(--line); white-space: nowrap; }
.td-tag.is-q { color: var(--yellow); background: rgba(201, 138, 0, .08); border-color: rgba(201, 138, 0, .2); }
.td-mk-new { color: var(--blue); background: rgba(0, 113, 227, .08); border-color: rgba(0, 113, 227, .22); }
.td-mk-moved { color: var(--orange); background: rgba(214, 105, 0, .08); border-color: rgba(214, 105, 0, .22); }
.td-tag.is-new { color: #7a4cc2; background: rgba(122, 76, 194, .1); border-color: rgba(122, 76, 194, .25); align-self: center; }
.td-ext-dot { flex: none; width: 10px; height: 10px; margin: 6px 6px 0; border-radius: 3px; background: var(--green); }
.td-ext.src-mine .td-ext-dot, .td-ag-ext.src-mine .td-ext-dot { background: #7a4cc2; }
.td-ext.src-dida .td-ext-dot, .td-ag-ext.src-dida .td-ext-dot { background: var(--orange); }
.td-ext-del { flex: none; align-self: center; font-size: 13px; color: var(--muted); }
.td-ext .td-row-t { font-weight: 400; }

/* ---------------------------------------------------------------- 分组 */
.td-sec + .td-sec { margin-top: 18px; }
.td-sec-h { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.td-sec.is-late > .td-sec-h { color: var(--td-late); }
.td-n { font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums; }
button.td-sec-h { padding: 4px 0; border: 0; background: none; cursor: pointer; }
:where(button).td-sec-h:hover:not(:disabled) { background: none; color: var(--ink); }
.td-sec-done .td-row { opacity: .85; }
.td-done-l { margin-top: 4px; }
.td-empty { margin: 6px 0; color: var(--muted); }
.td-groups { margin-top: 18px; }
.td-groups > .td-sec:first-child > .td-sec-h { min-height: 30px; }

/* 分段按钮：按时间 / 按课程，月 / 周 / 列表 */
.td-seg { display: inline-flex; padding: 2px; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); }
.td-seg > button { min-width: 0; padding: 4px 12px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 13px; }
:where(.td-seg > button):hover:not(:disabled) { background: none; color: var(--ink); }
.td-seg > button.is-on, :where(.td-seg > button.is-on):hover { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-1); }
.td-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.td-new { flex: none; }
.td-new-day { margin-top: 18px; }
.td-new-day .td-new { width: 100%; }

/* ---------------------------------------------------------------- 加一条 */
.td-in { min-width: 0; font: inherit; font-size: 14px; }

/* ---------------------------------------------------------------- 面板：宽屏从右边滑出，手机从底部升起 */
.td-layer { position: fixed; inset: 0; z-index: 52; pointer-events: none; }
.td-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .22); opacity: 0; transition: opacity var(--dur-3) var(--ease-out); pointer-events: auto; }
.td-sheet { position: absolute; display: flex; flex-direction: column; background: var(--panel); box-shadow: var(--shadow-3);
  pointer-events: auto; transition: transform var(--dur-4) var(--ease-out); }
.td-layer.is-open .td-scrim { opacity: 1; }
.td-layer.is-open .td-sheet { transform: none; }
@media (min-width: 760px) {   /* 和外框（shell.css）同一个分界：760px 以下是手机布局 */
  .td-sheet { top: 0; right: 0; bottom: 0; width: min(440px, 92vw); border-left: 1px solid var(--line); transform: translateX(104%); }
  .td-scrim { background: rgba(0, 0, 0, .08); }
  .td-grab { display: none; }
}
@media (max-width: 759.98px) {
  .td-sheet { left: 0; right: 0; bottom: 0; max-width: 720px; margin: 0 auto; min-height: 50vh; min-height: 50dvh;
    max-height: min(90vh, 820px); max-height: min(90dvh, 820px);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(104%); transition-timing-function: var(--ease-sheet); }
  .td-grab { flex: none; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--line-2); }
  html.td-lock, html.td-lock body { overflow: hidden; }
}
.td-sheet-h { flex: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px 6px 20px; border-bottom: 1px solid var(--line); }
.td-sheet-title { flex: 1; min-width: 0; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-sheet-back { flex: none; font-size: 14px; }
.td-sheet-x { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 22px; line-height: 1; color: var(--muted); }
:where(button).td-sheet-x:hover:not(:disabled) { background: var(--soft); color: var(--ink); }
.td-sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px calc(28px + env(safe-area-inset-bottom)); }
.td-sheet-body > * + * { margin-top: 18px; }

/* 一件事的详情 */
.td-head { display: flex; align-items: flex-start; gap: 12px; }
.td-head .td-ck { margin-top: 4px; }
.td-head-t { flex: 1; min-width: 0; margin: 0; font-size: 19px; line-height: 1.4; overflow-wrap: anywhere; }
.td-head.is-done .td-head-t { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.td-ask { padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(201, 138, 0, .07); border: 1px solid rgba(201, 138, 0, .2); }
.td-kvs { display: grid; gap: 8px; }
.td-kv { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; font-size: 14px; }
.td-k { color: var(--muted); }
.td-v { color: var(--text); overflow-wrap: anywhere; }
.td-v-note { display: block; font-size: 12px; color: var(--faint); }
.td-block > h3 { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.td-link { display: inline-block; margin-right: 14px; }
/* 提醒：和设置里一样的勾选和自定义（app.css 的 rm- 类，remind.js 的 leadPicker）；详情面板窄，自定义的几条靠左 */
.td-rm-pick { display: grid; gap: 10px; }
.td-rm-pick .rm-cus, .td-rm-pick .rm-cus-rows { justify-items: start; }
.td-remind-say { margin-top: 8px; }
.td-rm-list { margin: 10px 0 0; padding: 0; list-style: none; }
.td-rm-list li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 13px; border-top: 1px solid var(--line); }
.td-rm-list li:first-child { border-top: 0; }
.td-rm-list li.is-past { color: var(--faint); }
.td-rm-w { min-width: 9em; font-variant-numeric: tabular-nums; }
.td-rm-list li .tag { align-self: center; height: 18px; font-size: 11px; }
/* 「提醒」标题旁边：跟着设置（灰，点了去设置）或单独设置（蓝）的小标签，单独设的后面一个「改回跟着设置」 */
h3.td-rm-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.td-rm-h .tag { letter-spacing: 0; }
.td-rm-h a.tag { text-decoration: none; }
.td-rm-h a.tag:hover { color: var(--ink); border-color: var(--line-2); text-decoration: none; }
.td-rm-h .td-rm-back { margin-left: auto; font-size: 12.5px; font-weight: 400; letter-spacing: 0; }
.td-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 6px; }
button.td-del { color: var(--red); }
button.td-ign { color: var(--muted); }
.td-form { display: grid; gap: 14px; }
.td-f { display: grid; gap: 4px; }
.td-f-l { font-size: 13px; color: var(--muted); }
.td-f-h { font-size: 12px; color: var(--faint); }
.td-f textarea { resize: vertical; }


/* ---------------------------------------------------------------- 首页日历 */
.td-cal-ctl { gap: 12px; }
.td-cal-nav { gap: 6px; }
.box > .td-cal-body { margin-top: 16px; }
.td-cn { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.td-cnt { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; line-height: 18px; text-align: center; font-weight: 600;
  color: var(--muted); background: var(--soft); font-variant-numeric: tabular-nums; }
.td-cnt.is-late { color: #fff; background: var(--td-late); }
.cal-c.is-dim { background: #fbfbfc; }
.cal-c.is-dim .cal-n { color: var(--faint); }
.cal-c.is-past:not(.is-today) .cal-n { color: var(--muted); }
.cal-ev.src-own { background: rgba(15, 139, 141, .12); }
.cal-ev.is-late { color: var(--td-late); }
.cal-src-dot.src-own, .cal-dots i.src-own { background: var(--td-own); }
.cal-dots i.is-late { background: var(--td-late); }

/* 周看法 */
.td-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden; }
.td-wd { display: flex; flex-direction: column; min-width: 0; min-height: 220px; background: var(--panel); }
.td-wd.is-today { background: var(--tint-soft); }
.td-wd.is-flash { animation: cal-flash 1s ease-in-out 2; }
.td-wd-h { display: flex; align-items: center; gap: 6px; padding: 8px; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; font-weight: 400; color: var(--muted); font-size: 12px; text-align: left; }
.td-wd-h .cal-n { color: var(--ink); }
.td-wd.is-today .td-wd-h .cal-n { background: var(--tint); color: #fff; font-weight: 600; }
.td-wd-h .td-cnt { margin-left: auto; }
.td-wd-b { display: grid; align-content: start; gap: 4px; padding: 6px; }
.td-wd-e { display: block; width: 100%; padding: 3px 6px; margin: 0; border: 0; border-radius: 4px; background: var(--accent-soft); text-align: left;
  font-size: 12px; line-height: 1.4; font-weight: 400; color: var(--ink); overflow-wrap: anywhere; }
.td-wd-e.src-hub { background: rgba(10, 102, 216, .09); }
.td-wd-e.src-own { background: rgba(15, 139, 141, .12); }
.td-wd-e.src-cal { background: rgba(31, 157, 72, .11); }
.td-wd-e.src-dida { background: rgba(214, 105, 0, .12); }
.td-wd-e.src-mine { background: rgba(122, 76, 194, .12); }
.td-wd-e.s-done, .td-wd-e.s-ignored { background: none; color: var(--faint); text-decoration: line-through; }
.td-wd-e.is-late { color: var(--td-late); }
.td-wd-t { margin-right: 4px; color: var(--muted); font-variant-numeric: tabular-nums; }
.td-wd-none { color: var(--faint); font-size: 12px; padding: 2px 6px; }

/* 列表看法 */
.td-agenda .td-sec + .td-sec { margin-top: 16px; }
.td-ag-day { font-size: 13px; }
.td-ag-ext { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 2px; margin: 0; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; background: none; text-align: left; font-weight: 400; color: var(--text); }
.td-sec-h + .td-ag-ext { border-top: 0; }
:where(button).td-ag-ext:hover:not(:disabled) { background: none; }
.td-ag-ext .td-ext-dot { margin: 6px 6px 0; }
.td-ag-t { flex: none; min-width: 40px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .td-cal-ctl { width: 100%; justify-content: space-between; }
  .cal-c { position: relative; }
  .cal-c .td-cn { justify-content: center; }
  .cal-c .td-cnt { position: absolute; top: 1px; right: 1px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; font-size: 9px; line-height: 14px; }
  .td-week { grid-template-columns: minmax(0, 1fr); }
  .td-wd { min-height: 0; flex-direction: row; }
  .td-wd-h { flex: none; flex-direction: column; justify-content: flex-start; width: 56px; border-bottom: 0; border-right: 1px solid var(--line); }
  .td-wd-h .td-cnt { margin-left: 0; }
  .td-wd-b { flex: 1; }
  .td-sheet-body { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .td-ck, .td-ck::after, .td-row-t, .td-sheet, .td-scrim { transition: none; }
  .td-ck.is-pop, .td-wd.is-flash { animation: none; }
  .td-row.is-going { animation: td-go .01s linear .3s forwards; }
}

/* ---------------------------------------------------------------- 课表（docs/specs/course-timetable.md）：每次上课一条，灰蓝色，只读 */
:root { --td-class: #5f6b7a; }
.cal-ev.src-class { background: rgba(95, 107, 122, .12); color: var(--text); }
.cal-src-dot.src-class, .cal-dots i.src-class { background: var(--td-class); }
.td-wd-e.src-class { background: rgba(95, 107, 122, .12); }
.td-ext.src-class .td-ext-dot, .td-ag-ext.src-class .td-ext-dot { background: var(--td-class); }

/* ---------------------------------------------------------------- #735：几点提醒、重复、改待办（详情面板里） */
.td-rm-b { display: grid; gap: 10px; justify-items: start; }
.td-tm { display: flex; flex-wrap: wrap; gap: 6px; }
.td-tm-i { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 2px 0 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; font-variant-numeric: tabular-nums; }
.td-tm-i.is-past { color: var(--faint); }
button.ibtn.td-tm-x { width: 22px; height: 22px; border-radius: 50%; }
.td-tm-x .ic { width: 12px; height: 12px; }
.td-tm-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.td-tm-add[hidden] { display: none; }
.td-rp-v { display: flex; align-items: baseline; gap: 12px; font-size: 14px; }
.td-rp-e { display: grid; gap: 10px; justify-items: start; }
.td-rp-days { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.td-rp-days:empty { display: none; }
button.td-rp-d { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--muted); font-size: 13px; }
button.td-rp-d.is-on { border-color: var(--ink); background: var(--ink); color: var(--panel); }
.td-rp-md { width: 7em; }
.td-rp-end { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.td-rp-end[hidden] { display: none; }
.td-f-date { display: flex; align-items: center; gap: 6px; }
.td-f-date > input { flex: 1; }
.td-f-date > .ibtn[hidden] { display: none; }