/*
 * Settings page
 */

.viewSizeGE-XL .set .page {							/* 2-col on large width */
	display: block;												/* undo display: flex */
	column-count: 2;
	/* .page is height:100% with overflow-y:auto, which caps the columns at the
	   viewport: anything that does not fit flows into a THIRD column beside them,
	   outside the box, where a vertical scrollbar cannot reach it - so the last
	   card (Support) simply vanishes until the window is made taller, which is
	   what happens when developer mode adds its card. Let the columns grow and
	   scroll on .navPages_wrapper, the designated scrollable page area, instead. */
	height: auto;
	overflow-y: visible;
}
.viewSizeGE-XL .set .card {
	break-inside: avoid;									/* don't break inside cards in 2-col */
}

.set .card_label {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 20ch;
}
.set .card_value, .set .card_message {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 30ch;
}

.set button {
	margin-right: 4px;
	white-space: pre;
}

/*
 * Standard cards
 */
.set .card_trouble .card_label {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 25ch;
}

.set .svId_set_email input:invalid, .set .svId_set_password input:invalid {
	color: red;
}
.setTrDescWrapper textArea {
	width: 60vw;
	min-width: 290px;
	max-width: 400px;
	height: 55vh;
	max-height: 600px
}