body {
	padding: 0.5rem;
}

ul {
	margin: 0;
	list-style: none;
	padding: 0;
}

ol {
	margin: 0;
}

p {
	width: 420px;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.home-actions + .alert-box {
	margin-top: 12px;
}

.config-divider {
	margin: 32px 0;
}

.home-actions {
	margin-top: 24px;

	>button+button {
		margin-left: 16px;
	}
}

.question-form {
	margin-top: 8px;
}

.word-prompt {
	display: block;
}

.answer-input {
	margin-top: 8px;

	&.-correct {
		border-bottom-color: var(--green);
	}

	&.-incorrect {
		border-bottom-color: var(--red);
	}

	&.-wrong-flash {
		border-bottom-color: var(--red);
		animation: input-shake 0.35s ease-out;
	}
}

.question-count {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-top: 16px;
}

.form-actions {
	margin-top: 16px;

	>button+button {
		margin-left: 16px;
	}
}

@keyframes input-shake {

	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-6px);
	}

	75% {
		transform: translateX(6px);
	}
}

.config-panels {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-start;
}

.tense-group {
	margin-top: 24px;

	legend {
		font-size: 16px;
	}
}

.tense-grid {
	border-collapse: collapse;
	margin-top: 8px;

	th[scope="col"],
	th[scope="row"] {
		font-weight: normal;
		color: var(--secondary);
		font-size: 14px;
		text-align: left;
	}

	th[scope="col"] {
		padding: 0 24px 8px 0;
	}

	td {
		padding: 3px 24px 3px 0;
	}

	th[scope="row"] {
		padding: 3px 32px 3px 0;
	}
}

.tense-specials {
	display: flex;
	gap: 24px;
	margin-top: 8px;
}

.tense-cell {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.tense-example {
	color: #303030;
	font-size: 14px;
}

.save-action {
	margin-top: 24px;
	display: flex;
	align-items: baseline;
	gap: 16px;
}

.deck-item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.deck-remove {
	font-size: 12px;
	color: var(--red);
}

.deck-upload {
	margin-top: 16px;
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.deck-upload-label {
	font-size: 14px;
	color: var(--secondary);
}

.word-level {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;

	&.-unknown { text-decoration-color: var(--red); }
	&.-seen    { text-decoration-color: #a08030; }
	&.-known   { text-decoration-color: var(--green); }
}

.answer-reveal {
	margin-top: 24px;

	>p {
		width: auto;
	}

	>ol {
		margin-top: 8px;

		>li+li {
			margin-top: 4px;
		}
	}

	.answer-value {
		font-style: italic;
	}

	&.-correct .answer-value  { color: var(--green); }
	&.-incorrect .answer-value { color: var(--red); }
}

output.result-score {
	display: block;
	font-size: 21px;
	margin-top: 8px;
}

.result-table {
	border-collapse: collapse;
	margin-top: 24px;

	td {
		padding: 4px 24px 4px 0;
		vertical-align: top;
	}

	.outcome {
		&.-correct   { color: var(--green); }
		&.-incorrect { color: var(--red); }
	}

	.tense-label {
		color: var(--secondary);
		font-size: 14px;
	}
}

.result-actions {
	margin-top: 32px;

	>button+button {
		margin-left: 16px;
	}
}

[x-cloak] {
	display: none !important;
}