/* ─── CALENDAR ─── */
.cal-wrap{max-width:680px;margin:0 auto;padding:0 14px}
.cal-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(20px + env(safe-area-inset-top)) 8px 14px;
}
.cal-month-label{font-size:20px;font-weight:700;letter-spacing:-.3px;user-select:none;-webkit-user-select:none}
.cal-nav-btn{
  width:36px;height:36px;border:none;background:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--t2);touch-action:manipulation;
  transition:background .14s,color .14s,transform .2s cubic-bezier(0.34,1.5,0.64,1);
}
@media(hover:hover){.cal-nav-btn:hover{background:var(--hov);color:var(--t1)}}
.cal-nav-btn:active{transform:scale(0.85)}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}
.cal-dow span{
  text-align:center;font-size:11px;font-weight:600;color:var(--t3);
  padding:4px 0;letter-spacing:.04em;user-select:none;-webkit-user-select:none;
}
.cal-dow span:first-child{color:var(--red)}
.cal-dow span:last-child{color:var(--blue)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-day{
  border-radius:var(--rs);
  display:flex;flex-direction:column;align-items:center;
  padding:6px 1px 5px;cursor:pointer;min-height:72px;touch-action:manipulation;
  transition:background .13s,transform .2s cubic-bezier(0.34,1.5,0.64,1);
  user-select:none;-webkit-user-select:none;overflow:hidden;
}
@media(hover:hover){.cal-day:not(.other):hover{background:var(--hov)}}
.cal-day:active{transform:scale(0.9)}
.cal-day.other{opacity:.3;pointer-events:none}
.cal-day.today .cal-dn{
  background:var(--t1);color:#fff;border-radius:50%;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
}
.cal-day.selected{background:var(--sur2)}
.cal-dn{
  font-size:13px;font-weight:500;color:var(--t1);
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  margin-bottom:3px;flex-shrink:0;
}
.cal-day.other .cal-dn{color:var(--t3)}

/* ─── CALENDAR DOTS (start-date only) ─── */
.cal-dots{display:flex;gap:3px;justify-content:center;flex-wrap:wrap;margin-top:2px;padding:0 3px}
.cal-dot{width:5px;height:5px;border-radius:50%;background:var(--t3);flex-shrink:0}
.dot-c0{background:var(--ec0)}.dot-c1{background:var(--ec1)}
.dot-c2{background:var(--ec2)}.dot-c3{background:var(--ec3)}
.dot-c4{background:var(--ec4)}.dot-c5{background:var(--ec5)}
.dot-c6{background:var(--ec6)}.dot-c7{background:var(--ec7)}
.cal-dot-more{font-size:8px;color:var(--t3);line-height:5px}

/* ─── SPAN BARS (overlay, CSS-grid-placed, seamless) ─── */
/* color palette shared with dots */
.bar-c0{background:var(--ec0)}.bar-c1{background:var(--ec1)}
.bar-c2{background:var(--ec2)}.bar-c3{background:var(--ec3)}
.bar-c4{background:var(--ec4)}.bar-c5{background:var(--ec5)}
.bar-c6{background:var(--ec6)}.bar-c7{background:var(--ec7)}

/* ─── CALENDAR PANEL ─── */
.cal-panel{
  margin:10px 0 0;
  background:var(--bg);border:1px solid var(--bor);border-radius:var(--rl);
  overflow:hidden;box-shadow:var(--sh1);
  animation:formIn .2s ease both;
}
.cal-panel-hdr{
  padding:13px 18px 11px;border-bottom:1px solid var(--bor);
  display:flex;align-items:center;justify-content:space-between;
}
.cal-panel-date{font-size:15px;font-weight:600}
.cal-close-btn{
  width:28px;height:28px;border:none;background:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--t2);touch-action:manipulation;
  transition:background .1s;
}
@media(hover:hover){.cal-close-btn:hover{background:var(--hov)}}
.cal-panel-body{padding:10px 14px 14px;display:flex;flex-direction:column;gap:5px}
.cal-task-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--rs);background:var(--sur);
  transition:background .12s;cursor:pointer;touch-action:manipulation;
}
@media(hover:hover){.cal-task-row:hover{background:var(--hov)}}
.cal-task-row:active{background:var(--sur2)}
.ctr-color{
  width:3px;border-radius:2px;flex-shrink:0;min-height:20px;
  align-self:stretch;background:var(--bor);
}
.ctr-c0{background:var(--ec0)}
.ctr-c1{background:var(--ec1)}
.ctr-c2{background:var(--ec2)}
.ctr-c3{background:var(--ec3)}
.ctr-c4{background:var(--ec4)}
.ctr-c5{background:var(--ec5)}
.ctr-c6{background:var(--ec6)}
.ctr-c7{background:var(--ec7)}
.ctr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;justify-content:center}
.ctr-title{font-size:14px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ctr-title.done{text-decoration:line-through;color:var(--t2)}
.ctr-meta{font-size:11px;color:var(--t3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cal-empty{padding:22px;text-align:center;color:var(--t3);font-size:13px}