:root {
	--manilaColor: #ffe699;
	--coral: #ffb3b3;
	--paleGreen: #c1f0c1;
	--folder-tab-dx: 13px;
	--tab-brdr-btm: 23.9px;
	--tab-padding: 6px;
	--label-size: 14px;
}

body {
	background: #966F33;
	margin: 0;
}

.main-page {
	margin: auto;
}

#section-holder {
	display: flex;
	justify-content: space-evenly;
}

@media screen and (max-width: 480px) {
	#section-holder {
		flex-direction: column;
	}
}

.section {
	flex: 1 1 0px;
	max-width: 460px;
}

/* shared SVG styles */
svg text {
	user-select: none;
	font-family: monospace;
	font-weight: bold;
}

/*		console styles		*/
#console {
	--screw-radius: 1em;

	border-radius: 1.5em;
	margin: 5px 0 0 0;
	background-color: #202020;
	padding: 0.5em 0.5em 0.5em 0.5em;
	display: grid;
	grid-template-columns: repeat(2, var(--screw-radius)) 1fr repeat(2, var(--screw-radius));
	grid-template-rows: repeat(2, var(--screw-radius)) repeat(4, auto) repeat(2, var(--screw-radius));

	.screw {
		grid-row: span 2;
		grid-column-start: span 2;
		grid-column-end: span 2;
	}

	.console-cluster {
		grid-row-end: span 2;
		grid-column: 2 / -2;
		padding: 0 0 10px 0;
		margin-bottom: 10px;
		border-bottom: 2px solid white;
	}

	.console-cluster:last-of-type {
		border: none;
	}

	.row1 { grid-row-start: 1; }
	.row2 { grid-row-start: 2; }
	.row4 { grid-row-start: 4; }
	.row6 { grid-row-start: 6; }
	.row-n { grid-row-end: -1; }

	.col1 { grid-column-start: 1; }
	.col-n { grid-column-end: -1; }
}

.tuner-grid {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto auto;
	grid-column-gap: 10px;
	justify-content: center;

	& div {
		text-align: center;
	}
}

/* radio-tuner class styling */
.radio-tuner {
	max-width: 300px;

	text {
		cursor: pointer;
	}

	svg line {
		transition: transform 2000ms;
		transform-origin: 50% 50%;
		transform: rotate(0deg);
	}
}

.ag-conic-fill {
	width: 100%;
	height: 100%;
	margin: 0;
	background: conic-gradient(from 65deg,
		#fff 0deg 50deg, #ccc 70deg 160deg,
		#fff 180deg 230deg, #ccc 250deg 340deg, #fff);
}

#wpm-tuner .radio-pointer {
	transform: rotate(108deg);
}

#lvl-tuner text {
	font-size: 16px;
}

/* Switch panel section and switch */
.sw-grid {
	display: grid;
	grid-template-columns: 40% 15% 40%;
	grid-column-gap: min(2.5%, 10px);
	grid-row-gap: 4px;
	justify-content: space-evenly;

	& div {
		text-align: center;
	}

	.blinker-container {
		align-content: center;
	}

	.row2 {
		margin-bottom: 1em;
	}

	.row3.col2 {
		grid-column: 2 / 4;
	}

	.col1-4 {
		grid-column: 1 / 4;
		display: flex;
		justify-content: center;
	}
}

/* toggle switch styling */
.toggle-switch {
	display: block;
	cursor: pointer;
	clip-path: url(#switch-plate-outline);
	max-width: 250px;

	input {
		display: none;
	}
}

/* The first method / selector is necessary, because Chromium does not handle ::part() correctly (or at all?).
Ideally the entire toggle switch would be contained in an svg <symbol>, styled by the ::part() selector */
input:checked + svg .switch-ball,
input:checked + svg use::part(switch-ball) {
	cx: 70%;
}

input:checked + svg .switch-shaft,
input:checked + svg > use::part(switch-shaft) {
	transform: rotateY(180deg);
}

.switch-shaft {
	transform-origin: 50% 50%;
	transition: transform 300ms cubic-bezier(0.25, 0.0, 0.25, 1);
}

.switch-ball {
	transition: cx 300ms cubic-bezier(0.25, 0.0, 0.25, 1);
}
/* end SVG styles */

/*		embossed label style, modeled after:
https://i.pinimg.com/originals/ec/e7/27/ece727292ecde177d2cf1cc02b0d94de.jpg	*/
.emb-label {
	display: inline-block;
	padding: 5px 10px 2px;
	background-color: black;
	color: white;
	font-family: Manjari, monospace;
	text-transform: uppercase;
	letter-spacing: .3em;
	cursor: default;
}

#text-aid {
	width: 95%;
	font-size: 25px;
	resize: none;
}

/* Message selection area */
#button-panel {
	display: grid;
	grid-template-columns: 20% 70%;
	justify-content: space-evenly;
  padding-bottom: 10px;

	& button {
		border: none;
		background: none;
		clip-path: url(#clip-r11);
	}

	& svg > text {
		fill: cyan;
		font-family: monospace;
		dominant-baseline: central;
		text-anchor: middle;
		white-space: pre;
	}
}

/* #pb-AV19xxRA { */
.conic-gradient {
	height: 100%;
	width: 100%;
}
	.outer-ring {
		--outer-ring-color-1: #65655f;
		--outer-ring-color-2: #a7a7a7;
		--outer-angle-1: 6deg;
		--outer-angle-2: 12deg;

		background: conic-gradient(from 90deg,
			var(--outer-ring-color-1) var(--outer-angle-1), var(--outer-angle-2),
			var(--outer-ring-color-2), calc(180deg - var(--outer-angle-2)),
			var(--outer-ring-color-1) calc(180deg - var(--outer-angle-1)) calc(180deg + var(--outer-angle-1)), calc(180deg + var(--outer-angle-2)),
			var(--outer-ring-color-2), calc(360deg - var(--outer-angle-2)),
			var(--outer-ring-color-1) calc(360deg - var(--outer-angle-1)));

		clip-path: url(#clip-r11);
	}

	.flat-ring {
		--flat-ring-color-1: #3b3b3b;
		--flat-ring-color-2: #6e6e6e;
		--flat-ring-angle-1: 10deg;
		--flat-ring-angle-2: 16deg;

		background: conic-gradient(from 90deg,
			var(--flat-ring-color-1) var(--flat-ring-angle-1), var(--flat-ring-angle-2),
			var(--flat-ring-color-2), calc(180deg - var(--flat-ring-angle-2)),
			var(--flat-ring-color-1) calc(180deg - var(--flat-ring-angle-1)) calc(180deg + var(--flat-ring-angle-1)), calc(180deg + var(--flat-ring-angle-2)),
			var(--flat-ring-color-2), calc(360deg - var(--flat-ring-angle-2)),
			var(--flat-ring-color-1) calc(360deg - var(--flat-ring-angle-1)));
	}

	.illuminated-ring {
		fill: none;
		stroke: #bbb;
	}
/* } */

.illuminated-ring.ring-red,
use.ring-red::part(illuminated-ring) {
	stroke: red;
	filter: drop-shadow(0 0 1.6px red);
}

.illuminated-ring.ring-grn,
use.ring-grn::part(illuminated-ring) {
	stroke: rgb(7, 160, 7);
	filter: drop-shadow(0 0 1.6px green) ;
}

/*			Info Folder			*/
#info-folder {
	padding: 10px 0 10px 0;
	position: relative;
	margin-left: 30px;

	& input[type="radio"] {
		display: none;
	}

	& > svg {
		position: absolute;
	}
}

input[type="radio"]:not(:checked) + .folder {
	display: none;
}

.folder {
	position: relative;		/* so that the folder-tab edges will be covered */
	border-radius: 16px 0 0 16px;
	padding: 10px;
	height: 570px;		/* will likely change this later	*/
	background-color: var(--folder-color);
	border-bottom-color: var(--folder-color);
}

#folder-tabs {
	position: absolute;
	right: calc(100% - 0.7px);
	display: flex;
	/* TODO: figure out a way to make this # flow */
	top: 18px;
	/* left: calc(calc(var(--tab-padding) * -8) + calc(-34 * var(--label-size)) + 106px);		489px	 */
	transform: rotate(-90deg);
	transform-origin: bottom right;
}

.folder-label {
	position: relative;
	min-width: 7em;
	margin-left: calc(1.8 * var(--folder-tab-dx));
	/* used to space the tabs from each other */
	padding: var(--tab-padding);
	border-radius: 10px 10px 0 0;
	font-family: monospace;
	font-size: var(--label-size);
	white-space: nowrap;
	text-align: center;
	background-color: var(--folder-color);
	border-bottom-color: var(--folder-color);
}

.folder-label::before {
	content: "";
	position: absolute;
	right: calc(1px - var(--folder-tab-dx));
	bottom: 0;
	border-bottom: var(--tab-brdr-btm) solid;
	border-bottom-color: inherit;
	border-right: var(--folder-tab-dx) solid transparent;
}

.folder-label::after {
	content: "";
	position: absolute;
	left: calc(1px - var(--folder-tab-dx));
	bottom: 0;
	border-bottom: var(--tab-brdr-btm) solid;
	border-bottom-color: inherit;
	border-left: var(--folder-tab-dx) solid transparent;
}

.paperclip {
	position: relative;
	top: -18px;
	left: 80%;
	float: left;

	& svg {
		position: absolute;
	}

	.paperclip-back {
		z-index: -1;
	}

	.paperclip-front {
		z-index: 1;
	}
}

.instruction-page {
	--folder-color: var(--manilaColor);

	& .paperclip > svg {
		transform: rotate(10deg);
	}
}

.code-page {
	--folder-color: skyblue;

	& .paperclip > svg {
		transform: rotate(20deg);
	}
}

.history-page {
	--folder-color: var(--paleGreen);
}

.coral-page {
	--folder-color: var(--coral);
}

.paper {
	background-color: aliceblue;
	font-family: monospace;
	padding: 25px 8px 8px;
}

figure {
	margin: 10px 0;
}

img {
	background-color: #fff;
	max-width: 100%;
	width: 400px;
}

#uagent-info:before{	content: 'navigator info: ';	}
#touch-info:before{		content: 'touchscreen?: ';	}