/* ============================================================
   Shared ticket object.

   cr-eat-drink.css loads this sheet as a dependency for the order ticket.
   The acquisition receipt also uses these torn-paper and facts-list pieces.
   ============================================================ */
.cr-placemat .cr-order--ticket,
.cr-ticket {
	--ticket-tear: polygon(0 0, 100% 0, 100% calc(100% - 0.35rem), 94% calc(100% - 0.05rem), 87% calc(100% - 0.4rem), 79% calc(100% - 0.1rem), 71% calc(100% - 0.45rem), 62% calc(100% - 0.05rem), 54% calc(100% - 0.35rem), 45% 100%, 37% calc(100% - 0.4rem), 28% calc(100% - 0.1rem), 20% calc(100% - 0.45rem), 12% calc(100% - 0.05rem), 5% calc(100% - 0.3rem), 0 calc(100% - 0.1rem));
	position: relative;
	isolation: isolate;
	filter: drop-shadow(1px 1px 0 var(--cr-russian-violet)) drop-shadow(-1px -1px 0 var(--cr-russian-violet)) drop-shadow(var(--cr-shadow-hard));
}

.cr-ticket--zigzag {
	--ticket-tear: polygon(0 0, 100% 0, 100% calc(100% - 0.4rem), 95% 100%, 90% calc(100% - 0.4rem), 85% 100%, 80% calc(100% - 0.4rem), 75% 100%, 70% calc(100% - 0.4rem), 65% 100%, 60% calc(100% - 0.4rem), 55% 100%, 50% calc(100% - 0.4rem), 45% 100%, 40% calc(100% - 0.4rem), 35% 100%, 30% calc(100% - 0.4rem), 25% 100%, 20% calc(100% - 0.4rem), 15% 100%, 10% calc(100% - 0.4rem), 5% 100%, 0 calc(100% - 0.4rem));
}

.cr-placemat .cr-order--ticket::before,
.cr-ticket::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--cr-printer-ivory);
	clip-path: var(--ticket-tear);
}

.cr-ticket--punch::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0.5rem;
	width: 0.6rem;
	background: radial-gradient(circle at center, var(--cr-surface) 0 0.2rem, transparent 0.21rem) 0 0 / 100% 1.2rem repeat-y;
}

.cr-placemat .cr-order__facts,
.cr-ticket__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: 0.9rem 2rem;
	margin: 0;
	padding: 0.9rem 0;
	border-block: 1px solid var(--cr-glaucous);
	overflow: clip;
}

/* A rule stands between facts. Each fact draws it at its own left, a gap
   away, and the list clips the one that would stand before a row's first. */
.cr-placemat .cr-order__fact,
.cr-ticket__fact {
	min-width: 0;
	margin-inline-start: -1rem;
	padding-inline-start: 1rem;
	border-inline-start: 1px solid var(--cr-glaucous);
}

@media (forced-colors: active) {

	.cr-ticket--punch::after {
		display: none;
	}

	.cr-ticket {
		filter: none;
	}
}