/*
 * DEPO calendar engine — structure only (positions, grids, scrolling), shared by the calendar demos;
 * every demo keeps its own copy and dresses it in css/<slug>.css. The look comes from variables:
 *   --cal-ink, --cal-muted, --cal-bg, --cal-surface, --cal-line, --cal-line-strong, --cal-accent,
 *   --cal-today, --cal-radius, --cal-font-num, and one colour per event type: --c-shoot,
 *   --c-casting, --c-meetup, --c-fitting, --c-deadline, --c-publish.
 * The hour grids use --hour (px per hour, set by js/calendar.js from hourHeight).
 */
[data-cat="shoot"] { --c: var(--c-shoot, #2f7d4f); }
[data-cat="casting"] { --c: var(--c-casting, #8a4fd1); }
[data-cat="meetup"] { --c: var(--c-meetup, #2a7fd6); }
[data-cat="fitting"] { --c: var(--c-fitting, #d0743c); }
[data-cat="deadline"] { --c: var(--c-deadline, #c8323c); }
[data-cat="publish"] { --c: var(--c-publish, #b8902a); }

.cal-btn, .cal-view, .cal-chip, .cal-month__num, .cal-month__more, .cal-mini__day, .cal-mini__name,
.cal-grid__day, .cal-day__card, .cal-up__btn, .cal-legend__item {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit;
}
[data-cal-body] { min-width: 0; }

/* ---------- month ---------- */
.cal-month { display: flex; flex-direction: column; min-height: 100%; }
.cal-month__head, .cal-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-month__grid { flex: 1; grid-auto-rows: minmax(var(--cal-row, 7.5rem), 1fr); }
.cal-month__cell { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; cursor: cell; }
.cal-month__num { align-self: flex-start; font-variant-numeric: tabular-nums; }
.cal-month__events { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-chip { display: flex; gap: .4em; align-items: baseline; min-width: 0; width: 100%; white-space: nowrap; }
.cal-chip__time { flex: none; font-variant-numeric: tabular-nums; }
.cal-chip__title { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-month__more { align-self: flex-start; }

/* ---------- small months (quarter, year, side) ---------- */
.cal-mini__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.cal-mini__day { position: relative; aspect-ratio: 1; display: grid; place-items: center; font-variant-numeric: tabular-nums; text-align: center; }
.cal-mini__day.is-out { visibility: hidden; }
[data-cal-mini] .cal-mini__day.is-out { visibility: visible; opacity: .35; }
.cal-mini__dots { position: absolute; left: 0; right: 0; bottom: 12%; display: flex; justify-content: center; gap: 2px; }
.cal-mini__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--c); }
.cal-quarter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cal-gap, 2rem); }
.cal-year { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cal-gap, 2rem) calc(var(--cal-gap, 2rem) * .75); }
@media (max-width: 1100px) { .cal-year { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cal-quarter { grid-template-columns: 1fr; max-width: 28rem; margin-inline: auto; } }
@media (max-width: 760px) { .cal-year { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- hour grids (week, hours) ---------- */
.cal-grid { --gutter: 4.25rem; display: flex; flex-direction: column; min-height: 0; height: 100%; }
.cal-grid__head { display: grid; grid-template-columns: var(--gutter) repeat(var(--days), minmax(0, 1fr)); flex: none; }
.cal-grid__corner { align-self: end; font-size: .7rem; }
.cal-grid__day { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cal-grid--hours .cal-grid__day { align-items: flex-start; }
.cal-grid__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cal-grid__body { position: relative; display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); height: calc(var(--hour) * 24); }
.cal-grid__times { position: relative; }
.cal-grid__time { position: absolute; right: .6rem; top: calc(var(--top) / 60 * var(--hour)); transform: translateY(-50%); font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-grid__time--q { font-size: .62rem; opacity: .55; }
.cal-grid__cols { position: relative; display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); user-select: none; -webkit-user-select: none; }
.cal-grid__col {
  position: relative; min-width: 0; cursor: cell;
  background-image:
    linear-gradient(var(--cal-line-strong, rgba(0,0,0,.14)) 1px, transparent 1px),
    linear-gradient(var(--cal-line, rgba(0,0,0,.06)) 1px, transparent 1px);
  background-size: 100% var(--hour), 100% calc(var(--hour) / 4);
}
.cal-ev {
  position: absolute; box-sizing: border-box; overflow: hidden; cursor: grab;
  top: calc(var(--top) / 60 * var(--hour)); height: calc(var(--len) / 60 * var(--hour) - 2px);
  left: calc(var(--col) / var(--cols) * (100% - 6px) + 2px); width: calc((100% - 6px) / var(--cols) - 2px);
  display: flex; flex-direction: column; min-height: calc(var(--hour) / 4 - 2px); touch-action: pan-y;
}
.cal-ev.is-short { flex-direction: row; gap: .4em; align-items: baseline; white-space: nowrap; }
.cal-ev.is-dragging { cursor: grabbing; z-index: 5; }
.cal-ev.is-draft { z-index: 4; pointer-events: none; }
.cal-ev__time { font-variant-numeric: tabular-nums; flex: none; }
.cal-ev__title, .cal-ev__place { overflow: hidden; text-overflow: ellipsis; }
.cal-ev__resize { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.cal-now { position: absolute; left: 0; right: 0; top: calc(var(--top) / 60 * var(--hour)); height: 2px; z-index: 3; pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: inherit; }
@media (max-width: 760px) {
  .cal-grid { --gutter: 3rem; }
  .cal-grid--week .cal-ev__place, .cal-grid--week .cal-ev__time { display: none; }
}

/* ---------- day agenda ---------- */
.cal-day__list { list-style: none; margin: 0; padding: 0; }
.cal-day__card { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; width: 100%; }
.cal-day__time { font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.cal-day__main { display: flex; flex-direction: column; min-width: 0; }
.cal-day__summary { display: flex; flex-direction: column; }

/* ---------- side lists ---------- */
.cal-up, .cal-legend { list-style: none; margin: 0; padding: 0; }
.cal-up__btn { display: flex; flex-direction: column; width: 100%; }
.cal-legend__item { display: flex; align-items: center; gap: .55em; width: 100%; }
.cal-legend__swatch { width: .75em; height: .75em; border-radius: 50%; background: var(--c); flex: none; }
.cal-legend__count { margin-left: auto; font-variant-numeric: tabular-nums; }
.cal-legend__item.is-off { opacity: .4; }
.cal-legend__item.is-off .cal-legend__swatch { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }

/* ---------- editor ---------- */
.cal-editor { border: 0; padding: 0; max-width: min(34rem, calc(100vw - 2rem)); width: 100%; }
.cal-editor::backdrop { background: rgba(10, 10, 12, .45); }
.cal-editor__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem; }
.cal-editor__title, .cal-editor__field--wide, .cal-editor__hint, .cal-editor__actions { grid-column: 1 / -1; }
.cal-editor__field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.cal-editor__field input, .cal-editor__field select, .cal-editor__field textarea { font: inherit; min-width: 0; }
.cal-editor__actions { display: flex; gap: .6rem; align-items: center; }
.cal-editor__spacer { flex: 1; }
.cal-editor [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .cal-root *, .cal-root *::before { transition: none !important; animation: none !important; } }