#calendar, .cal { height: 100%; }
.cal { display: flex; flex-direction: column; padding: 12px; gap: 8px; min-width: 0; }
.cal-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cal-title { font-size: 18px; font-weight: 600; min-width: 110px; text-align: center; white-space: nowrap; }
.cal-head .ghost { font-size: 20px; line-height: 1; padding: 2px 10px; flex: none; }
.cal-scope { margin-left: auto; color: var(--muted); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; color: var(--muted); font-size: 12px; }
.cal-weeks { flex: 1; min-height: 0; min-width: 0; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-card); background: rgba(255, 255, 255, 0.6); }
.week { position: relative; flex: 1 1 0; border-top: 1px solid var(--line); min-width: 0; }
.week:first-child { border-top: 0; }
.week-bg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.day { border-left: 1px solid var(--line); cursor: pointer; min-width: 0; }
.day:first-child { border-left: 0; }
.day:hover { background: var(--accent-soft); }
.day.out { background: rgba(0, 0, 0, 0.04); cursor: default; }
.day.out:hover { background: rgba(0, 0, 0, 0.04); }
.day.today { background: rgba(246, 189, 22, 0.14); }
.day.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.week-fg { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; padding: 0 2px; pointer-events: none; min-height: 100%; min-width: 0; align-content: start; }
.dnum { display: flex; align-items: center; gap: 4px; padding: 2px 4px; font-size: 12px; color: var(--text); }
.dnum.out { color: #b3b8c6; }
.dnum.today > span { background: var(--accent); color: #fff; border-radius: 10px; padding: 0 6px; }
/* 完成点：日号右侧的小勾 / 次数 */
.day-dots { margin-left: auto; display: flex; flex: 0 1 auto; min-width: 0; gap: 3px; overflow: hidden; }
.bar { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 4px; color: #fff; font-size: 12px; line-height: 22px; height: 22px; padding: 0 6px; margin: 0 2px; border-radius: 6px; overflow: hidden; white-space: nowrap; }
.bar.clip-l { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -2px; }
.bar.clip-r { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -2px; }
.bar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bar.done { background: var(--done); }
.dot { pointer-events: auto; cursor: pointer; flex: none; min-width: 16px; height: 16px; border-radius: 8px; color: #fff; font-size: 10px; line-height: 16px; text-align: center; padding: 0 3px; border: 1px solid #fff; }
/* 横条内的完成点：按日期对齐到对应列，叠在横条上层 */
.bar-mark { justify-self: center; align-self: center; z-index: 1; }

/* 日历变窄时收紧头部与格子，避免内容被裁切 */
@container (max-width: 560px) {
  .cal { padding: 10px 8px; gap: 6px; }
  .cal-head { gap: 4px; }
  .cal-title { flex: 1; min-width: 0; font-size: 16px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
  .cal-scope { display: none; }
  .cal-head .ghost { padding: 1px 6px; font-size: 17px; }
  .cal-head > button:not(.ghost) { padding: 2px 8px; font-size: 13px; }
}
@container (max-width: 400px) {
  .cal { padding: 8px 6px; gap: 4px; }
  .cal-head { gap: 2px; }
  .cal-title { font-size: 14px; }
  .cal-head .ghost { padding: 0 4px; font-size: 15px; }
  .cal-head > button:not(.ghost) { padding: 1px 6px; font-size: 12px; }
  .cal-weekdays { font-size: 11px; }
  .dnum { padding: 1px 2px; font-size: 11px; }
  .bar { margin: 0 1px; padding: 0 3px; font-size: 11px; }
  .dot { min-width: 14px; height: 14px; line-height: 14px; }
}