p.empty {
	text-align: center;
	font-style: italic;
	background-color: rgb(var(--base));
	border: 2px dashed rgba(var(--base-200));
	border-radius: var(--radius);
}

details {
	margin: 2rem 0;
	h2 {
		margin: 0;
	}
}



.simple-calendar {

	nav.calendar.types {
		height: max-content;
		ul,li, a {
			height: var(--chipchip);
		}
		ul {
			--justify: flex-start;
		}
		details {
			margin: 0;
			display: block;

			summary {
				width: 100%;
				display: flex;
			}

		}
	}

	.calendar.col {
		border-radius: .5rem;
		border: 2px solid rgb(var(--action-0));
		width: var(--btn_);
		--align: stretch;
		--gap: 0;

		span {
			text-align: center;
			text-transform: uppercase;
			line-height: .8;
		}
		.weekday {
			background-color: rgb(var(--action-0));
			color: rgb(var(--action-contrast));
			font-weight: var(--fw-h-bold);
			font-family: var(--heading);
			line-height: 1.4;
			margin-bottom: .5rem;
		}

		.day {
			font-size: var(--txt-xx-large);
		}
	}
	details {
		&#calendar, &#past {
			display: block;
		}
	}
	.item-list {
		list-style: none;
		margin: 0;
		min-width: 100%;

		> li {
			width: 100%;
			padding: 1rem .25rem;

			+ li {
				margin-top: 1rem;
				border-top: 1px solid rgb(var(--base-200));
			}

			>img {
				max-width: 250px;
				margin: 0 auto;
			}

			.header {
				--gap: 1rem;
				--wrap: nowrap;
			}
			h3 {
				margin: 0;
			}
			.meta {
				display: flex;
				gap: 1rem;
			}
		}
	}
	.tags {
		--gap: 1rem;

		.tag {
			display: flex;
			gap: .5rem;
			background-color: rgb(var(--action-0));
			color: rgb(var(--action-contrast));
			font-size: var(--txt-x-small);
			text-transform: uppercase;
			border-radius: 4px;
			padding: .25rem .5rem 0;
		}
	}
}