/* 日程卡（10-16 第九轮重做，白晨 10-15 夜：「日程里的那个置顶一样的强调色，做的很丑。是整一块 UI」）。
   三版由地址 cal= 切换（app.js calendarCard）：1 日历日视图（默认）、2 极简清单、3 一条「今天」时间带＋列表。
   规矩：不画竖条、不七彩。层级只用墨色深浅与字重——钉住的最实，专注段与没钉的日程是普通，建议与待定最淡；
   颜色只表状态：现在／进行中＝蓝，待定与「上一场还在开」＝橙，逾期＝红，做完＝绿。
   结构：一、共用（外形、滚动、标题行、小字、钉与钉的动效、层级过渡）；二、第 1 版（白晨 10-15 夜选定；第 2、3 版已删）；五、手机；六、减少动态效果。 */

/* ============ 一、共用 ============ */
.cv {
  --cv-fix: color-mix(in srgb, var(--ink) 10%, var(--surface));   /* 钉住的块：一层柔和的墨 */
  --cv-sug: color-mix(in srgb, var(--ink) 2.5%, var(--surface));     /* 建议：几乎看不出的底 */
  --cv-bar-own: color-mix(in srgb, var(--ink) 32%, transparent);
  --cv-bar-sug: color-mix(in srgb, var(--ink) 13%, transparent);
  --cv-tr: 220ms var(--ease);
}
/* 桌面两栏：卡高跟左边「会议＋待办」那一摞走，不把那两张撑高；内容长了在卡里滚，第一次打开滚到现在附近 */
@media (min-width: 761px) {
  .c-cal.cv { contain: size; }
  .cv .cv-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; margin: 0 -10px; padding: 0 10px; }
  .cv .cv-scroll.is-over { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 22px), transparent 100%); }
}
.cv .ch { margin-bottom: 10px; }
.cv .tl-row { position: relative; }
.cv .cv-in { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cv .cv-ti { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-weight: 500; color: var(--ink-2); transition: color var(--cv-tr); }
.cv .cv-tt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cv .cv-ti > .ico { align-self: center; width: 14px; height: 14px; color: var(--done-dot); }
.cv-over { flex: none; font: 500 12px var(--font-sans); font-style: normal; color: var(--late-ink); }
.cv-meta { min-width: 0; overflow: hidden; font-size: 12px; line-height: 1.5; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.cv-live { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-weight: 600; color: var(--today-ink); }
.cv-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--today-dot); animation: cvBreath 2.4s ease-in-out infinite; }
@keyframes cvBreath { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--today-dot) 35%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--today-dot) 0%, transparent); } }
.cv-end { display: inline-flex; flex: none; align-items: center; gap: 2px; }
.cv-tag { display: inline-flex; align-items: center; gap: 5px; padding: 0 4px; font: 500 12px/26px var(--font-sans); font-style: normal; color: var(--ink-3); white-space: nowrap; }
.cv-tag.wait { color: var(--wait-ink); }
.cv-tag .dot { width: 6px; height: 6px; box-shadow: none; }
/* 做完的专注段：整行退一档，标题前一枚绿勾 */
.cv .is-done .cv-tt { color: var(--ink-3); }

/* 钉：没钉的指到、聚焦时出现空心钉；钉住的常显一枚小实心钉（墨色 2 档，不抢标题）；触屏没有悬停，空心钉常显但更淡 */
.cv .pin-btn { display: grid; place-items: center; flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-3); cursor: pointer; opacity: 0;
  transition: opacity 140ms var(--ease), background-color 140ms var(--ease), color 140ms var(--ease); }
.cv .pin-btn .ico { width: 14px; height: 14px; transform-origin: 50% 85%; }
.cv .pin-btn:hover { background: var(--fc-plate); color: var(--ink); }
.cv .pin-btn:active { transform: scale(.94); }
.cv .pin-btn.on { opacity: 1; color: var(--ink-2); }
.cv .tl-row:hover .pin-btn, .cv .tl-row:focus-within .pin-btn, .cv .pin-btn:focus-visible { opacity: 1; }
.cv .past .pin-btn.on { color: var(--quiet-dot); }
@media (hover: none) { .cv .pin-btn { opacity: .5; } .cv .pin-btn.on { opacity: 1; } }
/* 钉下去：从上方落下、轻轻回弹（240 毫秒）；拔起：缩一下回原位（200 毫秒） */
.cv .pin-in .pin-btn .ico { animation: cvPinIn 240ms var(--ease) both; }
.cv .pin-out .pin-btn .ico { animation: cvPinOut 200ms var(--ease) both; }
@keyframes cvPinIn { 0% { transform: translateY(-5px) scale(.6) rotate(-22deg); opacity: 0; } 60% { transform: translateY(1px) scale(1.08) rotate(3deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes cvPinOut { 0% { transform: translateY(-2px) scale(1.15) rotate(-10deg); } 100% { transform: none; } }

/* ============ 二、第 1 版 日历日视图 ============
   左边 44 像素放整点，整点一道细线；块按时长排；钉住的＝柔和墨色实块＋600 字重，专注段＝白底细边，建议＝很淡的底、字退一档；
   进行中的块是一层很淡的蓝；现在线是一道蓝线，左端时刻盖在整点上 */
.cv-day { --cvk: .8; position: relative; margin: 8px 0; }
.cv-hr { position: absolute; left: 48px; right: 0; height: 0; border-top: 1px solid var(--line); }
.cv-hr b { position: absolute; right: calc(100% + 8px); top: -8px; font: 500 11px/16px var(--font-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv .cv-blk { position: absolute; left: 54px; right: 0; display: flex; align-items: flex-start; gap: 6px; padding: 5px 4px 5px 11px; border-radius: 9px; overflow: hidden;
  transition: background-color var(--cv-tr), box-shadow var(--cv-tr), opacity var(--cv-tr); }
.cv-blk .cv-in { line-height: 1.35; }
.cv-blk .cv-ti { font-size: 13px; }
.cv-blk .cv-meta { margin-top: 1px; line-height: 1.35; }
.cv-blk .cv-end { margin-top: -4px; }
.cv-blk.one { align-items: center; padding-top: 0; padding-bottom: 0; }
.cv-blk.one .cv-in { flex-direction: row; align-items: baseline; gap: 8px; }
.cv-blk.one .cv-meta { flex: none; margin-top: 0; }
.cv-blk.one .cv-end { margin-top: 0; }
.cv-blk.lv-fix { background: var(--cv-fix); }
.cv-blk.lv-fix .cv-ti { font-weight: 600; color: var(--ink); }
.cv-blk.lv-fix .cv-meta { color: var(--ink-2); }
.cv-blk.lv-own { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.cv-blk.lv-sug { background: var(--cv-sug); }
.cv-blk.lv-sug .cv-ti { color: var(--ink-3); }
.cv-blk.k-pend { background: color-mix(in srgb, var(--wait-dot) 6%, var(--surface)); }
.cv-blk.live { background: color-mix(in srgb, var(--today-dot) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--today-dot) 22%, transparent); }
.cv-blk.past { opacity: .5; }
.cv-blk.past.lv-own { box-shadow: inset 0 0 0 1px var(--line); }
.cv-blk.is-done { opacity: .55; }
.cv-blk:hover { z-index: 2; }
.cv-nowl { position: absolute; left: 48px; right: 0; z-index: 3; height: 0; border-top: 1.5px solid var(--today-dot); pointer-events: none; }
.cv-nowl::before { content: ""; position: absolute; left: -4px; top: -4.75px; width: 8px; height: 8px; border-radius: 50%; background: var(--today-dot); }
.cv-nowl b { position: absolute; right: calc(100% + 6px); top: -9px; padding: 0 2px; border-radius: 4px; background: var(--surface); font: 700 11px/16px var(--font-num); color: var(--today-ink); font-variant-numeric: tabular-nums; }

/* ============ 五、手机 ============ */
@media (max-width: 760px) {
  .cv-blk { left: 50px; }
  .cv-hr { left: 44px; }
  .cv-nowl { left: 44px; }
  .cv-blk.one .cv-meta { display: none; }
  .cv-now { grid-template-columns: 44px minmax(0, 1fr); gap: 0 10px; }
}

/* ============ 六、减少动态效果：层级直接换，钉直接出现，不呼吸 ============ */
@media (prefers-reduced-motion: reduce) {
  .cv .cv-blk, .cv .cv-ti, .cv .cv-tm b, .cv .cv-sb, .cv .cv-sw { transition: none; }
  .cv .pin-in .pin-btn .ico, .cv .pin-out .pin-btn .ico, .cv-live i, .cv-pastl { animation: none; }
}