/* Singular */
span.singular {
	text-transform: capitalize;
}

/* Items */
.items {
	--threshold : 140px;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--threshold), 1fr));
	gap: var(--size-medium);
	font-size: 1rem;
}
	.items > * {
		position: relative;
		z-index: 1;
		display: block;
	}
	.items > .item {
		--this-primary : var(--color-primary);

		transition: all 250ms ease;
	}
	.items > .item:hover {
		--this-primary : var(--color-light);

		margin: -0.3em;
		padding: 0.3em;
		background-color: var(--color-primary);
		border-radius: 0.3em;
	}
		.items a {
			color: var(--this-primary);
			text-decoration: none;
		}
		.items > .item img {
			width: 100%;
			border-radius: 0.3em;
		}
		.items > .item h3 {
			margin: 0.25em 0 0;
			color: var(--this-primary);
			font-size: 1em;
		}
		.items > .item p {
			margin: 0;
			font-size: 0.7em;
			font-weight: normal;
		}
		.items > .item h3 + p {
		}
	.items > .group {
		position: relative;
		grid-column: 1 / -1;
		margin: 3rem 0 var(--size-medium);
		font-size: 1rem;
		line-height: 1;
		cursor: pointer;
	}
	.items > .group.hide {
		margin-bottom: 0;
	}
	.items > .group:first-child {
		margin-top: var(--size-medium);
	}
		.items > .group h2 {
			position: relative;
			z-index: 2;
			left: 50%;
			display: inline-block;
			margin: 0;
			padding: 0.6em 1em 0.4em;
			color: var(--color-light);
			font-family: var(--font-body);
			font-size: 0.8em;
			font-weight: bold;
			line-height: 1;
			background-color: var(--color-primary);
			border-radius: 1.5em 1.5em 0 0;
			border-radius: 3em;
			white-space: nowrap;
			transform: translateX(-50%);
		}
		.items > .group.hide h2 {
			color: var(--color-dark);
			background-color: var(--color-secondary);
		}
		.items > .group:hover h2,
		.items > .group:focus h2 {
			color: var(--color-light);
			background-color: var(--color-dark);
		}
			.items > .group img {
				display: inline-block;
				margin: -0.3em 0.5em -0.1em 0;
				vertical-align: middle;
			}
			.items > .group h2::after {
				content: '\25BC';
				position: relative;
				top: -0.05em;
				margin: 0 -0.3em 0 0.5em;
				font-size: 0.8em;
			}
			.items > .group.hide h2::after {
				transform: rotate(-90deg);
			}
		.items > .group::after {
			content: '';
			position: absolute;
			z-index: 1;
			top: 50%;
			left: 0;
			right: 0;
			display: block;
			height: 0.4em;
			background-color: var(--color-primary);
			border-radius: 3em;
			transform: translateY(-0.2em);
		}
		.items > .group.hide::after {
			background-color: var(--color-secondary);
		}
		.items > .group:hover::after,
		.items > .group:focus::after {
			background-color: var(--color-dark);
		}
	.items > .graveyard {
		order: 9999;
		opacity: 0.6;
	}
	.items > .has-last {}
	.items > .has-last--since {
		opacity: 0.4;
	}
.items--narrow {
//	grid-template-columns: repeat(3, 1fr);
}
.items--wide {
//	grid-template-columns: repeat(6, 1fr);
}
.items--filtered {}
	[data-filtered] .items--filtered > .item,
	[data-filtered] .items--filtered > .group {
		display: none;
	}
	[data-filtered=all] .items--filtered > .item,
	[data-filtered=all] .items--filtered > .group {
		display: block;
	}
/*.items--tabs {}
	.items--tabs > .item {
		display: grid;
		grid-template-columns: 2fr 3fr;
		grid-template-rows: 1fr 1fr;
		grid-gap: 0 5px;
		background-color: var(--bg-tab);
		border-radius: var(--radius-tab-5x2);
//		box-shadow: var(--shadow);
		transform-origin: bottom;
		transition: transform 0.1s, box-shadow 0.1s;
	}
	.items--tabs > .item:hover {
		background-color: var(--bg-tab-hover);
//		box-shadow: var(--shadow-hover);
		transform: scale(1.02);
	}
	[data-filtered=all] .items--filtered.items--tabs > .item {
		display: grid;
	}
		.items--tabs > .item img {
			grid-column: 1 / span 1;
			grid-row: 1 / span 2;
			padding: 10px;
			border-radius: 50%;
		}
		.items--tabs > .item h3 {
			align-self: end;
			margin: 0;
			min-width: 0;
			max-height: 1.3em;
			overflow: hidden;
		}
		.items--tabs > .item .balance {
			font-size: 16px;
		}
		.items > .item.positive .balance,
		.items > .item.negative .balance {
			color: #7C7;
			font-weight: bold;
			text-shadow: 1px 1px rgba(0,0,0,0.5);
		}
		.items > .item.negative .balance {
			color: #C77;
		}
			.items--tabs > .item .balance i {
				padding-right: 4px;
				font-style: normal;
				font-size: 0.8em;
				vertical-align: top;
			}*/
@media screen and (min-width: 30rem) {
.items {
	--threshold : 160px;
}
}
@media screen and (min-width: 50rem) {
.items {
	--threshold : 180px;
}
}

/* Gallery */
.items--gallery {
	--threshold : 30%;

	gap: var(--size-small);
}
@media screen and (min-width: 30rem) {
.items--gallery {
	--threshold : 120px;
}
}
@media screen and (min-width: 50rem) {
.items--gallery {
	--threshold : 150px;
}
}


/* Reveal / Persist */
.items--reveal {}
	.items--reveal > .item {
		cursor: pointer;
	}
		.items--reveal > .item > :not(.persist) {
			display: none;
		}

/* Repeater */
.item .repeater {
	border: 1px solid hsl(0 0% 0% / 0.1);
}
	.item .repeater > div {
		font-size: 0.7rem;

		padding: 0.25em 0.4em;
	}
	.item .repeater > div:nth-child(even) {
		background-color: hsl(0 0% 0% / 0.1);
	}

/* Display parent/child */
.display-parent {
	display: flex;
	gap: 1rem;
}
	.display-parent > * {
	}
	.display-10 { width: 10%; }
	.display-15 { width: 15%; }
	.display-20 { width: 20%; }
	.display-25 { width: 25%; }
	.display-30 { width: 30%; }
	.display-33 { width: 33%; }
	.display-40 { width: 40%; }
	.display-50 { width: 50%; }
	.display-60 { width: 61%; }
	.display-66 { width: 66%; }
	.display-70 { width: 70%; }
	.display-75 { width: 75%; }
	.display-80 { width: 80%; }
	.display-90 { width: 90%; }
	.display-100 { width: 100%; }

/* Prefix */
.field-wrap [class*=prefix-]::before {
	content: none;
}
.prefix-currency::before {
	content: '$';
	padding-right: 0.3em;
	font-size: 0.8em;
	vertical-align: top;
	opacity: 0.7;
}

/* Rating */
.item .rating {}
	.item .rating.stars {
		font-size: 1.75rem;

		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 1em;
		line-height: 1;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}
	.dialog .item .rating.stars {
		font-size: 2.25rem;

		position: relative;
	}
		.item .rating.stars::after {
			position: absolute;
			inset: 0;
			padding-left: 0.2em;
			text-align: left;
			color: gold;
			text-indent: 0;
			text-shadow: 3px 3px 4px hsl(0 0% 0% / 0.6);
		}
		.dialog .item .rating.stars::after {
			padding: 0;
		}
		.item .stars.rating-1::after { content: "★"; }
		.item .stars.rating-2::after { content: "★★"; }
		.item .stars.rating-3::after { content: "★★★"; }
		.item .stars.rating-4::after { content: "★★★★"; }
		.item .stars.rating-5::after { content: "★★★★★"; }