/* CoDicts Voxel Calendar Feed - base styles */
.cf-calendar {
	--cf-loader-overlay-color: 255,255,255;
	--cf-loader-overlay-opacity: 0.32;
	--cf-loader-body-opacity: 0.38;
	--cf-loader-spinner-size: 28px;
	--cf-loader-spinner-track: var(--ts-shade-6, #f3f4f6);
	--cf-loader-spinner-highlight: var(--ts-shade-2, #9ca3af);
	--cf-btn-text: #334155;
	--cf-btn-bg: #ffffff;
	--cf-btn-border: #d1d5db;
	--cf-btn-active-bg: #2563eb;
	--cf-btn-active-color: #ffffff;
	box-sizing: border-box;
	position: relative;
	font-family: inherit;
	color: inherit;
}
.cf-calendar *, .cf-calendar *::before, .cf-calendar *::after { box-sizing: border-box; }
.cf-loader[hidden], .cf-popup[hidden] { display: none !important; }

.cf-empty { padding: 24px; text-align: center; color: #6b7280; border: 1px dashed #d1d5db; border-radius: 8px; }

.cf-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cf-header__nav { display: flex; align-items: center; gap: 6px; }
.cf-header__title { margin: 0; flex: 1 1 auto; text-align: center; font-size: 1.1em; font-weight: 600; }
.cf-header__views { display: inline-flex; gap: 4px; }

.cf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; min-width: 32px; padding: 4px 12px; border: 1px solid var(--cf-btn-border); border-radius: 6px; background: var(--cf-btn-bg); color: var(--cf-btn-text); cursor: pointer; font: inherit; line-height: 1; opacity: 0.92; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, opacity 120ms ease; }
.cf-btn:hover { opacity: 1; }
.cf-btn.is-active { background: var(--cf-btn-active-bg); color: var(--cf-btn-active-color); border-color: var(--cf-btn-active-bg); opacity: 1; }
.cf-btn--icon { padding: 4px 8px; font-size: 1.2em; }

/* Loader */
.cf-stage { position: relative; }
.cf-loader { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 24px; pointer-events: none; }
.cf-loader .ts-loader { width: var(--cf-loader-spinner-size); height: var(--cf-loader-spinner-size); flex-shrink: 0; border-color: var(--cf-loader-spinner-track); border-bottom-color: var(--cf-loader-spinner-highlight); }
.cf-loader__label { display: none; }
.cf-loader--inline { position: static; inset: auto; padding: 24px 0; }
.cf-calendar.is-loading .cf-stage > .cf-body { opacity: var(--cf-loader-body-opacity); filter: saturate(0.7); pointer-events: none; }
.cf-calendar.is-loading .cf-stage::after { content: ''; position: absolute; inset: 0; background: rgba(var(--cf-loader-overlay-color), var(--cf-loader-overlay-opacity)); border-radius: 8px; }
.cf-body { transition: opacity 180ms ease, filter 180ms ease; }

/* Month grid */
.cf-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: #e5e7eb; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.cf-month__weekday { background: #f9fafb; padding: 6px; text-align: center; font-weight: 600; font-size: 0.85em; }
.cf-day { background: #fff; min-height: 96px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cf-day.is-other { background: #fafafa; color: #9ca3af; }
.cf-day.is-today { background: #eff6ff; }
.cf-day__num { font-size: 0.85em; font-weight: 600; }
.cf-day__events { display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.cf-event { display: block; padding: 2px 6px; font-size: 0.8em; border-radius: 4px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #3b82f6; color: #fff; border: 0; text-align: left; line-height: 1.3; }
.cf-event__time { opacity: 0.85; margin-right: 4px; font-variant-numeric: tabular-nums; }
.cf-event:hover { filter: brightness(0.95); }
.cf-day__more { font-size: 0.75em; color: #6b7280; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }

/* List */
.cf-list { display: flex; flex-direction: column; gap: 12px; }
.cf-group { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.cf-group__head { padding: 8px 12px; background: #f9fafb; font-weight: 600; font-size: 0.9em; }
.cf-group__items { display: flex; flex-direction: column; }
.cf-group__items .cf-event { border-radius: 0; padding: 10px 12px; font-size: inherit; white-space: normal; border-bottom: 1px solid #f3f4f6; }
.cf-group__items .cf-event:last-child { border-bottom: 0; }

.cf-empty--inbody { padding: 24px; text-align: center; color: #6b7280; }

/* Popup – anchored card (no overlay) */
.cf-popup { position: absolute; z-index: 9999; width: 280px; max-width: calc(100vw - 32px); }
.cf-popup__inner { position: relative; background: #fff; border-radius: 12px; max-height: 80vh; overflow: auto; box-shadow: 0 4px 24px rgba(0,0,0,0.18); }
.cf-popup__close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; background: rgba(0,0,0,0.06); border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; z-index: 2; display: flex; align-items: center; justify-content: center; }
.cf-popup__content { padding: 0; }
.cf-popup.is-loading .cf-popup__content > *:not(.cf-loader) { opacity: 0.35; filter: saturate(0.7); pointer-events: none; }

@media (max-width: 640px) {
	.cf-calendar {
		padding-left: 0;
		padding-right: 0;
	}
	.cf-header {
		gap: 8px;
		margin-bottom: 10px;
	}
	.cf-header__nav,
	.cf-header__views {
		width: 100%;
	}
	.cf-header__nav {
		justify-content: space-between;
	}
	.cf-header__views {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}
	.cf-btn {
		min-height: 36px;
		padding: 6px 10px;
	}
	.cf-day { min-height: 86px; padding: 4px; }
	.cf-header__title { order: -1; flex-basis: 100%; }
	.cf-month { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.cf-month__weekday { font-size: 11px; padding: 4px 2px; }
	.cf-day__num { font-size: 12px; }

	/* Mobile month: keep event chips readable and allow wrapping */
	.cf-month .cf-day { gap: 3px; }
	.cf-month .cf-day__events {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-height: 0;
	}
	.cf-month .cf-event {
		display: block;
		width: 100%;
		padding: 3px 4px;
		font-size: 11px;
		line-height: 1.25;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		word-break: break-word;
		hyphens: auto;
		border-radius: 5px;
	}
	.cf-month .cf-event__time {
		display: block;
		margin-right: 0;
		margin-bottom: 1px;
	}
	.cf-month .cf-event__title { white-space: normal; }
	.cf-month .cf-day__more {
		font-size: 10px;
		line-height: 1.1;
		margin-top: 1px;
	}

	/* Keep day lists readable on mobile */
	.cf-group__items .cf-event {
		font-size: 13px;
		padding: 10px 12px;
		line-height: 1.3;
		text-indent: 0;
	}
	.cf-group__items .cf-event__title,
	.cf-group__items .cf-event__time {
		display: inline;
	}

	/* On mobile, use a bottom sheet instead of tiny anchored popover */
	.cf-popup {
		position: fixed;
		left: 8px !important;
		right: 8px;
		top: auto !important;
		bottom: max(8px, env(safe-area-inset-bottom));
		width: auto;
		max-width: none;
	}
	.cf-popup__inner {
		width: 100% !important;
		max-height: min(70vh, 560px);
		border-radius: 14px;
	}
}