.joinContent {
	display: grid;
	grid-template-areas: "time x" "qr join";
	gap: var(--s-1) var(--s-4);
	justify-content: center;
}

.joinInfo {
	display: flex;
	flex-direction: column;
	grid-area: join;
	gap: var(--s-2);
}

.infoHeader {
	text-transform: uppercase;
	color: var(--color-text-high);
	font-size: var(--font-2xs);
	line-height: 1.1;
}

.infoValue {
	font-size: var(--font-lg);
	font-weight: var(--weight-semi);
	letter-spacing: 1px;
}

.qrCodeContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-1);
	grid-area: qr;
}

.roomAge {
	grid-area: time;
	font-size: var(--font-2xs);
	color: var(--color-text-high);
	text-align: center;
}

.qrCode {
	background-color: white;
	padding: var(--s-2);
	border-radius: var(--radius-field);
}

.joinLink {
	font-size: var(--font-2xs);
	text-overflow: ellipsis;
	overflow-x: hidden;
	text-wrap: nowrap;
	max-width: 140px;
}

.qrOverlay {
	width: 172px;
	height: 172px;
	border-radius: var(--radius-field);
	padding: var(--s-2);
	background-color: var(--color-bg-higher);
	grid-area: qr;
}

.stalePrompt {
	display: flex;
	gap: var(--s-6);
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.staleText {
	font-size: var(--font-sm);
	color: var(--color-text-high);
	text-align: center;
}

.noRoomHint {
	font-size: var(--font-sm);
	color: var(--color-text-high);
	display: grid;
	place-items: center;
	text-align: center;
}