/* card-review - the Cards review session (templates/components/card-review.php, scripts/cards.js).
   $todo - structural scaffolding only; Derek styles it.

   Grouping by proximity: inside a group (a label and what it names) the gap
   is small; between groups it's large. Children's own margins are zeroed so
   the gaps are the only spacing. */

card-review {
	display: block;
}

.card-review {
	display: grid;
	gap: var(--space-large);
	max-width: 40rem;

	.review-status,
	.clocks {
		display: flex;
		justify-content: space-between;
		gap: var(--space-medium);
	}

	.review-card {
		display: grid;
		gap: var(--space-large);
	}

	.card-front,
	.card-back,
	.tester {
		display: grid;
		gap: var(--space-large);
	}

	/* A label and the thing it names: one tight group. */
	.card-front,
	.your-answer,
	.the-answer {
		display: grid;
		gap: var(--space-small);

		> * {
			margin-block: 0;
		}
	}

	/* The answer looks unlike everything the student wrote or read. */
	.the-answer {
		padding: var(--space-medium);
		background: var(--fill-secondary);
		border: 1px solid var(--stroke-primary);
	}

	.keys {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-small);
	}

	.grade-actions {
		display: flex;
		gap: var(--space-medium);
	}
}