/* ═══════════════════════════════════════════════
   MONTH CALENDAR + DAY CARD-STACK (Phase 3)
   The month grid stays compact; clicking a day opens a side rail with the full
   card stack (cover + property pills) for that day.
═══════════════════════════════════════════════ */

/* Move the scroll onto the grid wrap so the day rail can sit beside it. */
.cal-sc{display:flex;overflow:hidden}
.cal-sc>.cal-gw{flex:1;min-width:0;overflow-y:auto}

/* Selected day highlight in the month grid. */
.cal-cell{cursor:pointer}
.cal-cell.cal-cell-sel{box-shadow:inset 0 0 0 2px var(--ac);background:color-mix(in srgb,var(--ac) 6%,transparent)}

/* ── Day rail ── */
.cal-daypanel{display:none}
.cal-daypanel.open{display:flex;flex-direction:column;width:300px;flex-shrink:0;overflow-y:auto;
  border-left:1px solid var(--bd);background:var(--bg);animation:calDayIn var(--t-med) ease}
@keyframes calDayIn{from{opacity:.3;transform:translateX(16px)}to{opacity:1;transform:none}}
.cdp-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:16px 16px 12px;
  position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--bd);z-index:1}
.cdp-eyebrow{font-size:11px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ac)}
.cdp-date{font-family:var(--fs);font-size:24px;color:var(--tx);line-height:1.05;margin-top:3px}
.cdp-x{background:none;border:none;color:var(--mu);font-size:20px;line-height:1;cursor:pointer;
  width:28px;height:28px;border-radius:var(--r-sm);transition:background var(--t-fast),color var(--t-fast)}
.cdp-x:hover{background:var(--bd);color:var(--tx)}
.cdp-body{padding:12px 16px 20px;display:flex;flex-direction:column;gap:10px}
.cdp-empty{color:var(--mu);font-size:12px;padding:12px 2px}

/* Full day card: cover banner + title + colored property pills. */
.cdc{background:var(--sur);border:1px solid var(--bd);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  border-top:3px solid var(--ev,var(--ac));transition:border-color var(--t-fast),transform var(--t-fast)}
.cdc:hover{transform:translateY(-1px);border-color:var(--bd2)}
.cdc-cover{height:74px;background-size:cover;background-position:center;background-color:var(--sur2)}
.cdc-b{padding:10px 12px}
.cdc-t{display:flex;align-items:center;gap:7px;font-family:var(--fs);font-size:14px;font-weight:600;color:var(--card-title);line-height:1.25}
.cdc-ico{flex-shrink:0}
.cdc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.cdc-chip{font-size:10px;padding:2px 8px;border-radius:var(--r-pill);font-weight:500}

@media(max-width:860px){
  .cal-daypanel.open{width:240px}
}

/* Month-grid event chips — clean 2-line wrap with an ellipsis, never a mid-word
   horizontal clip. The title is direct text in .cal-ev (compact) or in .cal-ev-inner
   (details); clamp whichever holds it, but never clamp the details chip's outer wrapper
   (it also holds the cover + property chips). overflow-wrap lets long words break so a
   word wider than the narrow cell wraps instead of being sliced. */
.cal-cell .cal-ev:not(:has(.cal-ev-inner)),
.cal-cell .cal-ev-inner{
  font-size:12.5px!important;line-height:1.3;white-space:normal;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:none;
}
.cal-cell .cal-ev:has(.cal-ev-inner){max-height:none;overflow:visible}
.cal-cell{min-height:124px}
/* Week + Day views — bigger, wrap freely (no clamp; the rows have room). */
.calw-body .cal-ev,.calw-body .cal-ev-inner{font-size:13.5px!important;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
.cald-body .cal-ev,.cald-body .cal-ev-inner{font-size:15px!important;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
.calw-body .cal-ev-inner,.cald-body .cal-ev-inner{display:block;-webkit-line-clamp:none;max-height:none}
/* Day-rail card titles also wrap rather than truncate. */
.cdc-t{font-size:14.5px}
.cdc-t>span{white-space:normal;overflow-wrap:anywhere}