/* Content calendar. Colors come from --co-* tokens so every web-theme
   re-skins this automatically (forntend/design/CONTEXT.md). Day cells are
   surface "tiles" that float on the page canvas: on themes that define
   --co-surface (Aurora, Apple, Cohere, Lime) they read as bento cards;
   plainer themes fall back to canvas + hairline + a soft shadow. Accent
   tints use color-mix so "today" and weekends read natively in bright
   *and* dark modes (mirrors the bento tile treatment in web-themes.css). */

.cal-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.cal-page-head > div { min-width:0; }
.cal-page-head h1 { font-size:clamp(30px,3.2vw,42px); line-height:1.04; margin:0 0 7px; }
.cal-page-head .co-body-large { max-width:56ch; font-size:15px; line-height:1.5; color:var(--co-ink-muted, var(--co-slate)); }
.cal-page-head .co-btn-primary { flex:none; }

/* Legend — soft surface chips instead of bare dots */
.cal-legend { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.cal-legend-item {
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px 5px 9px; border-radius:var(--co-radius-pill,999px);
  background:var(--co-surface, var(--co-canvas));
  border:1px solid var(--co-hairline);
  font-size:12px; color:var(--co-ink);
  box-shadow:0 1px 2px rgba(15,23,42,0.05);
}
.cal-legend-dot { width:9px; height:9px; border-radius:999px; display:inline-block; }

.cal-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.cal-nav { display:flex; align-items:center; gap:10px; }
.cal-label { font-size:15px; color:var(--co-ink); }
.cal-icon-btn { width:30px; height:30px; border-radius:999px; border:1px solid var(--co-hairline); background:var(--co-canvas); color:var(--co-ink); cursor:pointer; }
.cal-icon-btn:hover { background:var(--co-stone); }
.cal-viewtoggle { display:inline-flex; border:1px solid var(--co-hairline); border-radius:999px; overflow:hidden; }
.cal-seg { padding:6px 14px; border:0; background:var(--co-canvas); color:var(--co-slate); font-size:13px; cursor:pointer; }
.cal-seg.is-active { background:var(--co-ink); color:var(--co-canvas); }

/* Month grid — one framed surface, hairline-divided cells (calm, editorial:
   no floating tiles, no per-cell shadow). The 1px grid gap exposes the
   container's hairline background as crisp divider lines. */
.cal-month {
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:1px; background:var(--co-hairline);
  border:1px solid var(--co-hairline); border-radius:var(--co-radius-md,14px);
  overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,0.04), 0 24px 48px -34px rgba(15,23,42,0.28);
}
.cal-dow {
  background:var(--co-surface, var(--co-canvas));
  font-size:11px; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--co-slate); padding:11px 12px 10px; text-align:left;
}
.cal-cell {
  background:var(--co-surface, var(--co-canvas));
  min-height:122px; padding:8px 10px 10px;
  display:flex; flex-direction:column; gap:5px;
  transition:background .12s ease;
}
.cal-cell:hover { background:color-mix(in srgb, var(--co-ink) 3%, var(--co-surface, var(--co-canvas))); }
.cal-cell--muted { background:color-mix(in srgb, var(--co-canvas) 72%, var(--co-surface, var(--co-canvas))); }
.cal-cell--muted .cal-cell-date { color:var(--co-ink-dim, var(--co-muted-slate)); }
.cal-cell--today { background:color-mix(in srgb, var(--co-action-blue) 7%, var(--co-surface, var(--co-canvas))); }
.cal-cell.cal-dragover { background:color-mix(in srgb, var(--co-action-blue) 13%, var(--co-surface, var(--co-canvas))); box-shadow:inset 0 0 0 2px var(--co-action-blue); }
.cal-cell-head { display:flex; align-items:center; justify-content:space-between; min-height:24px; }
.cal-cell-date {
  font-size:13px; font-weight:600; color:var(--co-ink);
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:24px;
}
.cal-cell--today .cal-cell-date { background:var(--co-action-blue); color:#fff; border-radius:999px; padding:0 6px; font-size:12.5px; }
.cal-add {
  width:24px; height:24px; line-height:1; border-radius:999px;
  border:1px solid var(--co-hairline); background:var(--co-surface, var(--co-canvas));
  color:var(--co-slate); cursor:pointer; font-size:15px;
  display:inline-flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.cal-cell:hover .cal-add, .cal-cell:focus-within .cal-add,
.cal-col:hover .cal-add, .cal-col:focus-within .cal-add,
.cal-add:focus-visible { opacity:1; }
.cal-add:hover { background:var(--co-action-blue); border-color:var(--co-action-blue); color:#fff; }
/* Touch devices have no hover — keep the add affordance discoverable. */
@media (hover:none) { .cal-add { opacity:0.55; } }
.cal-cell-events { display:flex; flex-direction:column; gap:5px; }

/* Week grid — same framed surface as the month view. */
.cal-week {
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:1px; background:var(--co-hairline);
  border:1px solid var(--co-hairline); border-radius:var(--co-radius-md,14px);
  overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,0.04), 0 24px 48px -34px rgba(15,23,42,0.28);
}
.cal-col {
  background:var(--co-surface, var(--co-canvas));
  min-height:360px; padding:10px;
  display:flex; flex-direction:column; gap:6px;
  transition:background .12s ease;
}
.cal-col:hover { background:color-mix(in srgb, var(--co-ink) 3%, var(--co-surface, var(--co-canvas))); }
.cal-col--today { background:color-mix(in srgb, var(--co-action-blue) 7%, var(--co-surface, var(--co-canvas))); }
.cal-col.cal-dragover { background:color-mix(in srgb, var(--co-action-blue) 13%, var(--co-surface, var(--co-canvas))); box-shadow:inset 0 0 0 2px var(--co-action-blue); }
.cal-col-head { display:flex; align-items:center; gap:8px; min-height:26px; padding-bottom:9px; margin-bottom:2px; border-bottom:1px solid var(--co-hairline); }
.cal-col-dow { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--co-slate); }
.cal-col-date { font-size:14px; font-weight:600; color:var(--co-ink); margin-right:auto; display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; }
.cal-col--today .cal-col-date { background:var(--co-action-blue); color:#fff; border-radius:999px; padding:0 6px; font-size:13px; }

/* Event chip — compact two-line card. Colour derives from the content-type
   accent via color-mix (theme-safe, unlike the old pale --ev-soft tokens);
   status is a small leading glyph, not a full caption line, so a busy day
   stays short. Title truncates with an ellipsis. */
.cal-ev {
  background:color-mix(in srgb, var(--ev-accent, var(--co-slate)) 12%, var(--co-surface, var(--co-canvas)));
  border-left:3px solid var(--ev-accent, var(--co-slate));
  border-radius:6px; padding:4px 8px; cursor:grab;
  transition:transform .1s ease, box-shadow .1s ease, background .1s ease;
}
.cal-ev:hover {
  transform:translateY(-1px);
  background:color-mix(in srgb, var(--ev-accent, var(--co-slate)) 18%, var(--co-surface, var(--co-canvas)));
  box-shadow:0 4px 12px -6px color-mix(in srgb, var(--ev-accent, var(--co-slate)) 55%, transparent);
}
.cal-ev-title { display:flex; align-items:center; gap:6px; }
.cal-ev b { flex:1; min-width:0; font-size:11.5px; font-weight:600; color:var(--co-ink); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-ev small { display:block; font-size:10px; color:var(--co-ink-muted, var(--co-slate)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-ev-flag { flex:none; font-size:9px; line-height:1; color:var(--co-slate); }
.cal-ev--drafted .cal-ev-flag { color:var(--co-action-blue); }
.cal-ev--verified .cal-ev-flag { color:var(--co-deep-green); }
.cal-ev.dragging { opacity:0.4; }

/* "+N more" overflow link when a day has more than the visible cap. */
.cal-more {
  align-self:flex-start; margin-top:1px; padding:2px 7px;
  border:0; background:none; color:var(--co-slate);
  font-size:10.5px; font-weight:500; cursor:pointer; border-radius:6px;
}
.cal-more:hover { background:color-mix(in srgb, var(--co-ink) 6%, var(--co-surface, var(--co-canvas))); color:var(--co-ink); }

/* Status pills in modal */
.cal-pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; }
.cal-pill--planned { background:var(--co-stone); color:var(--co-slate); }
.cal-pill--drafted { background:var(--co-pale-blue); color:var(--co-action-blue); }
.cal-pill--verified { background:var(--co-pale-green); color:var(--co-deep-green); }
.cal-status-row { display:flex; align-items:center; gap:10px; }
.cal-saved-note { font-size:12px; color:var(--co-deep-green); }
.cal-brief-hint { font-size:12px; color:var(--co-slate); margin:0 0 8px; }
.cal-req { color:var(--co-coral); }
.cal-divider { border:0; border-top:1px solid var(--co-hairline); margin:16px 0; }
.cal-link-row { display:flex; gap:8px; align-items:center; }
.cal-edit-actions { justify-content:space-between; }
.co-btn-danger-text { background:none; border:0; color:var(--co-coral); cursor:pointer; font-size:13px; }

/* Modal shell (ported from the carousel schedule modal so this template
   is self-contained). */
.kp-modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(15,23,42,0.55); backdrop-filter:blur(4px); display:grid; place-items:center; padding:24px; }
.kp-modal { background:var(--co-surface,#fff); border:1px solid var(--co-hairline); border-radius:18px; width:100%; max-width:480px; max-height:88vh; overflow:auto; box-shadow:0 30px 60px -20px rgba(15,23,42,0.40); }
.kp-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:22px 24px 14px; border-bottom:1px solid var(--co-hairline); }
.kp-modal-kicker { font-family:var(--co-font-mono,monospace); font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--co-slate); font-weight:600; margin:0 0 4px; }
.kp-modal-title { font-size:20px; font-weight:600; margin:0; color:var(--co-ink); line-height:1.2; }
.kp-modal-close { width:30px; height:30px; border-radius:999px; border:0; background:rgba(15,23,42,0.06); font-size:18px; cursor:pointer; color:var(--co-ink); }
.kp-modal-body { padding:18px 24px 22px; display:flex; flex-direction:column; gap:16px; }
.kp-modal-field { display:flex; flex-direction:column; gap:6px; }
.kp-modal-actions { display:flex; gap:8px; justify-content:flex-end; align-items:center; }