/* Mench Event Tickets — public ticket page. System fonts only: it must load at a gate with weak signal. */
:root {
	--met-ink: #142b49;
	--met-muted: #4a5d77;
	--met-line: #dce3ee;
	--met-page: #eef2f8;
	--met-card: #ffffff;
	--met-head: #142b49;
	--met-head-ink: #ffffff;
	--met-accent: #c5d8f4;
	--met-ok: #0f7a45;
	--met-ok-bg: #e3f4ea;
	--met-warn: #8a5a00;
	--met-warn-bg: #fdf1d6;
	--met-bad: #a3261b;
	--met-bad-bg: #fbe6e3;
	--met-info: #173b63;
	--met-info-bg: #e5edf8;
	--met-radius: 22px;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root { --met-page: #0d1b2e; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body.met-ticket-page {
	min-height: 100vh;
	background: var(--met-page);
	color: var(--met-ink);
	font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.met-ticket-wrap { max-width: 440px; margin: 0 auto; padding: 20px 16px 40px; }
.met-ticket {
	background: var(--met-card);
	border-radius: var(--met-radius);
	box-shadow: 0 1px 0 rgba(20, 43, 73, .06), 0 18px 40px -18px rgba(20, 43, 73, .45);
	overflow: hidden;
	position: relative;
}
.met-ticket--empty { padding: 32px 24px; }
.met-ticket--empty .met-ticket__title { color: var(--met-ink); font-size: 24px; }
.met-ticket__head { background: var(--met-head); color: var(--met-head-ink); padding: 22px 24px 26px; }
.met-ticket__site { margin: 0 0 14px; font-size: 13px; color: var(--met-accent); letter-spacing: .01em; }
.met-ticket__title { margin: 0 0 8px; font-size: clamp(24px, 7vw, 30px); line-height: 1.12; font-weight: 750; letter-spacing: -.015em; text-wrap: balance; }
.met-ticket__when { margin: 0; font-size: 18px; font-weight: 600; }
.met-ticket__where { margin: 6px 0 0; color: var(--met-accent); font-size: 15px; }
.met-ticket__where a { color: #fff; margin-left: 6px; text-underline-offset: 3px; }
/* Perforation: a dashed line between two cut-out notches. */
.met-ticket__tear { position: relative; height: 0; border-top: 2px dashed var(--met-line); margin: 0 22px; }
.met-ticket__tear::before, .met-ticket__tear::after {
	content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--met-page);
}
.met-ticket__tear::before { left: -35px; }
.met-ticket__tear::after { right: -35px; }
.met-ticket__body { padding: 22px 24px 8px; text-align: center; }
.met-ticket__status {
	display: inline-block; margin: 0 0 16px; padding: 6px 14px; border-radius: 999px;
	font-weight: 700; font-size: 15px; background: var(--met-ok-bg); color: var(--met-ok);
}
.met-ticket--checked_in .met-ticket__status { background: var(--met-info-bg); color: var(--met-info); }
.met-ticket--held .met-ticket__status { background: var(--met-warn-bg); color: var(--met-warn); }
.met-ticket--void .met-ticket__status { background: var(--met-bad-bg); color: var(--met-bad); }
.met-qr { width: min(100%, 300px); aspect-ratio: 1; margin: 0 auto; background: #fff; }
.met-qr svg { display: block; width: 100%; height: 100%; }
.met-ticket--checked_in .met-qr { opacity: .35; }
.met-ticket__code { margin: 14px 0 18px; }
.met-ticket__code-label { display: block; font-size: 13px; color: var(--met-muted); }
.met-ticket__code-value { font: 700 24px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .08em; }
.met-ticket__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 16px 0 6px; border-top: 1px solid var(--met-line); text-align: left; }
.met-ticket__facts dt { font-size: 13px; color: var(--met-muted); }
.met-ticket__facts dd { margin: 2px 0 0; font-weight: 650; font-size: 17px; overflow-wrap: anywhere; }
.met-ticket__foot { padding: 6px 24px 24px; text-align: center; }
.met-ticket__tip { margin: 6px 0 14px; color: var(--met-muted); font-size: 14px; }
.met-ticket__button {
	display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
	border: 1.5px solid #b9c8dc; border-radius: 12px; color: var(--met-info); font-weight: 650; text-decoration: none;
}
.met-ticket__button:hover { background: #edf3fb; }
.met-ticket__button:focus-visible, .met-ticket__where a:focus-visible { outline: 3px solid #2f6fd6; outline-offset: 2px; }
@media print {
	body.met-ticket-page { background: #fff; }
	.met-ticket { box-shadow: none; border: 1px solid #999; }
	.met-ticket__button, .met-ticket__tip { display: none; }
}