body {
	background: #333;
	text-align: center;
	color: #EEE;
	font: 1em/1.5em 'Lucida Grande', Calibri, sans-serif;
	margin: 0;
	overflow: hidden;
}
body.inactive { background: #555; }
#bodywrap { /* Necessary because of a dumb Samsung Browser bug */
	overflow-x: hidden;
	padding: 30px 20px;
	height: 100vh; height: 100svh; /* incl. fallback */
	width: 100vw;
	box-sizing: border-box;
	position: relative;
}

h1 {
	font-weight: normal;
	margin: 1.25em 0 0;
	font-size: 2.25em;
}
p.subtitle {
	color: #999;
	font-size: 1.2em;
}
.inactive .subtitle::after {
	content: ' - inactive';
	font-style: italic;
}

a.button, button, input[type='submit'] {
	cursor: pointer;
	color: #EEE;
	border: none;
	text-decoration: none;
}
button:disabled, .picked button { opacity: 0.25; }
button.picked:disabled, .picked button.picked { opacity: 1; }

.actions {
	display: flex;
	justify-content: space-between;
	max-width: 800px;
	margin: 2em auto 0;
}
.actions a, #q-queue {
	height: 3em; width: 3em;
	text-indent: -9999px;
	opacity: 0.5;
}
.actions a:hover, #q-queue:hover { opacity: 0.75; }
.actions a.disabled {
	opacity: 0.1;
	pointer-events: none;
}
.actions .back { background: url("icon/svg.php?icon=caret-left-fill&color=FFF") left/2.5em 2.5em no-repeat; }
.actions .snooze {
	position: relative;
	background: url("icon/svg.php?icon=moon-fill&color=FFF") center/2em 2em no-repeat;
}
.actions .forward { background: url("icon/svg.php?icon=caret-right-fill&color=FFF") right/2.5em 2.5em no-repeat; }
.actions .archive { background: url("icon/svg.php?icon=archive&color=FFF") right/2.5em 2.5em no-repeat; }
.archived .actions .archive { background: url("icon/svg.php?icon=unarchive&color=FFF") right/2.5em 2.5em no-repeat; }
.actions .clear { background: url("icon/svg.php?icon=x-lg&color=FFF") right/2.5em 2.5em no-repeat; }
#q-queue {
	display: block;
	margin: 15em auto 0;
	opacity: 0.1;
	background: url("icon/svg.php?icon=question-circle-fill&color=FFF") right/2.5em 2.5em no-repeat;
}
#question.active + #q-queue { display: none; }
.snooze[data-excused]::after {
	content: attr(data-excused);
	position: absolute;
	display: block;
	top: -1em; left: 1.5em;
	text-indent: 0;
	color: #EEE;
	white-space: nowrap;
	background: #111;
	padding: 2px 10px;
	border-radius: 4px 4px 4px 0;
}
.snooze[data-excused]::before {
	position: absolute;
	display: block;
	border-width: 0.25em 0.5em;
	border-style: solid;
	border-color: #111 transparent transparent #111;
	content: '';
	left: 1.5em; top: 0.75em;
}

#sinfo { position: relative; }
#sinfo > div {
	margin: 0.5em auto 0;
	background: rgb(255 255 255 / 15%);
	padding: 2em 0 0;
	border-radius: 10px;
	position: absolute;
	transition: left 0.25s;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
}
#sinfo > .out { left: -420px; }
#sinfo > .in { left: calc(100vw + 380px); } /* Asymmetric because of our centering trick with translateX */
#sinfo > div, #pick, ul.classlist a { max-width: 800px; }
#sinfo h2 {
	margin: 0;
	font-size: 1.75em;
}
.dupename { border-bottom: 3px dotted rgb(255 255 255 / 15%); }
.note {
	margin: 0.5em 2em 0;
	font-style: italic;
	color: #CCC;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 1.5em;
}

#sinfo ul {
	padding: 0;
	list-style: none;
	display: flex;
	margin: 1.5em 0 0;
}
#sinfo li { flex: 1; }
#sinfo button {
	width: 100%;
	font-size: 4em;
	padding: 10px 0;
	height: 1.5em;
	background-size: 1em 1em;
	background-repeat: no-repeat;
	background-position: center;
	color: #FFF;
}
#sinfo li:first-child button { border-radius: 0 0 0 10px; }
#sinfo li:last-child button { border-radius: 0 0 10px 0; }

#bottom-anchor {
	position: absolute;
	bottom: 30px;
	left: 40px; right: 40px;
}
#pick {
	width: 100%;
	background: #3A3;
	padding: 0.75em;
	border-radius: 50px;
	font-size: 2rem;
	display: inline-block;
	box-sizing: border-box;
}
#pick:hover { background: #292;}
#pick:active { background: #181; }

ul.classlist {
	margin: 0; padding: 0;
	list-style: none;
	max-height: 36em;
	overflow-y: scroll;
}

ul.classlist a:not(#pick) {
	display: block;
	font-size: 1.8em;
	color: #CCC;
	text-decoration: none;
	padding: 0.7em 0;
	width: 100%;
	border-top: 1px solid rgb(255 255 255 / 20%);
	margin-left: auto; margin-right: auto;
}
ul.classlist a:not(#pick):hover {
	background: rgb(255 255 255 / 5%);
	color: #DDD;
}
ul.classlist li:last-child a:not(#pick) { border-bottom: 1px solid rgb(255 255 255 / 20%); }
ul.classlist a span {
	display: block;
	font-size: 0.555em;
	margin-top: 0.25em;
	color: #999;
}
#bottom-anchor h2 {
	font-size: 1em;
	text-transform: uppercase;
}
#bottom-anchor h2 span {
	color: #999;
	font-weight: normal;
	text-transform: none;
}
.switchable { cursor: pointer; }
ul.classlist.inactive, h2.inactive { display: none; }
.noclasses {
	font-size: 2.25em;
	color: #777;
}
.noclasses #pick {
	display: block;
	margin: 2em auto 1em;
	width: auto;
}

#logo {
	background: url("icon/svg.php?icon=logo&color=FFF") center no-repeat;
	text-indent: -9999px;
	opacity: 0.8;
	height: 1.5rem;
}
h1#logo { height: 1.5em; }

#adminbutton, #rosteredit {
	display: inline-block;
	border: 1px solid rgb(255 255 255 / 25%);
	padding: 0.5em 1em;
	color: #999;
	font-size: 0.8em;
	border-radius: 30px;
	position: absolute;
	top: 20px; right: 20px;
}
#rosteredit {
	position: static;
	padding: 0.25em 1em;
	margin-top: -0.25em;
}
#adminbutton:hover, #rosteredit:hover {
	background: rgb(255 255 255 / 10%);
	border-color: rgb(255 255 255 / 35%);
	color: #BBB;
}
#backbutton, #rosterlist {
	color: #FFF;
	opacity: 0.3;
	position: absolute;
	top: 25px;
	height: 2em; width: 2em;
}
#backbutton {
	background: url("icon/svg.php?icon=arrow-left&color=FFF") center/2em 2em no-repeat;
	left: 30px;
	text-indent: -9999em;
}
#backbutton:hover, #rosterlist:hover, #rosterclose a:hover { opacity: 0.5; }

/* Roster list */

#rosterlist {
	background: url("icon/svg.php?icon=list&color=FFF") center/2em 2em no-repeat;
	right: 30px;
	text-indent: -9999em;
}

#roster {
	list-style: none;
	text-align: left;
	position: absolute;
	top: 0; right: -18em;
	height: 100%; width: 18em;
	background: rgb(75 75 75 / 85%);
	backdrop-filter: blur(10px);
	transition: 0.2s right;
	z-index: 10;
	border-radius: 1em 0 0 1em;
}
#roster.open {
	right: 0;
	box-shadow: -1em 0 2em rgb(0 0 0 / 0.15);
}
#roster #topbar {
	position: absolute; 
	padding: 0.5em 1.5em;
	top: 0; width: 100%;
	display: flex;
	justify-content: space-between;
	padding-top: 1.5em;
	backdrop-filter: blur(10px);
	z-index: 99;
	box-sizing: border-box;
	border-top-left-radius: 1em;
}
#rosterclose {
	font-size: 2em;
	color: #FFF;
	opacity: 0.25;
	text-decoration: none;
	justify-content: space-between;
}
#rosterclose:hover { opacity: 0.5; }
#roster ul {
	overflow-y: auto;
	scrollbar-color: rgb(255 255 255 / 25%) rgb(75 75 75 / 85%);
	height: 100%;
	padding: 4em 0 0;
	margin: 0;
	box-sizing: border-box;
}
#roster li:not(.head) {
	padding: 0.5em 1.5em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	font-size: 1.2em;
	color: rgb(255 255 255 / 75%);
}
#roster li.selected {
	background: rgb(255 255 255 / 10%);
	color: #FFF;
}
#roster li[data-q] { font-size: 0.9em; }
#roster .head {
	text-transform: uppercase;
	font: bold 0.9em sans-serif;
	color: #888;
	padding-left: 1.2em;
	margin-top: 1em;
}
#roster .excused { opacity: 0.5; }
#roster .excused::after {
	content: '';
	background: url("icon/svg.php?icon=moon-fill&color=FFF") center/0.8em 0.8em no-repeat;
	height: 0.8em; width: 0.8em;
	float: right;
	margin: 5px -15px 0 0;
	opacity: 0.75;
}

#question {
	padding: .2em 1em 1em;
	color: #CCC;
	background: #222;
	border-radius: 10px;
	font-size: 1.4em;
	line-height: 1.5;
	max-width: 800px;
 	margin: 11em auto 0;
 	box-sizing: border-box;
	display: none;
	position: relative;
}
#question.active { display: block; }
#question .actions {
	margin: 0.5em auto 1.5em;
	font-size: 0.5em;
}

/* Keyboard help */

dialog {
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	margin: 0; padding: 1.5em 2em;
	background: rgb(75 75 75 / 85%);
	backdrop-filter: blur(10px);
	color: #FFF;
	border: none;
	border-radius: 10px;
	box-shadow: 0 1em 2em rgb(0 0 0 / 0.15);
	text-align: left;
	outline: none;
}
dialog ul {
	list-style: none;
	margin: 0; padding: 0;
}
dialog li {
	border-bottom: 1px solid rgb(255 255 255 / 0.1);
	padding: 0.25em 0;
}
dialog li:last-child { border-bottom: none; }
dialog li > span {
	float: right;
	margin-left: 2em;
}
kbd {
	font-size: 0.85em;
	border: 1px solid rgb(255 255 255 / 0.2);
	padding: 0.1em 0.4em;
	border-radius: 2px;
	background: rgb(255 255 255 / 0.075);
	border-top-color: rgb(255 255 255 / 0.325);
	box-shadow: 0 1px 0 rgb(0 0 0 / 0.25);
}
.close {
	float: right;
	text-decoration: none;
	color: #999;
	font-size: large;
}
dialog h2 {
	font-size: large;
	text-align: center;
	margin: 0 0 1.5em;
}

/* Small phones */

@media screen and (max-height: 51em) {
	body {font-size: 0.8em; }
	#bodywrap { padding: 20px; }
	#backbutton, #rosterlist { top: 20px; }
	#pick {
		padding: 20px;
		font-size: 1.6rem;
	}
}
@media screen and (max-height: 42em) {
	.subtitle { display: none; }
}