/* study-hall-show — Study Hall, one item at a time, for a group (game show).
   Geometry only: the dialog fills the screen and stacks the count and Close,
   the item in the middle, and Back and Next. Its surface and ink come from
   data-emphasis='focused' in the section's palette; type from the voices; the
   buttons are the site's own (forms.css) and the featured action (components.css).
   Markup: templates/components/study-hall-show.php
   Behavior: scripts/study-hall-show.js
   Scaffold: basic structure, needs a real design pass. */

study-hall-show {
	display: block;
	margin-bottom: var(--space-large);

	/* The featured action sets its own display, which would beat the hidden attribute. */
	[data-show='open'][hidden] {
		display: none;
	}

	dialog {
		inline-size: 100%;
		block-size: 100dvh;
		max-inline-size: none;
		max-block-size: none;
		margin: 0;
		padding: var(--space-medium);
		border: 0;

		&[open] {
			display: grid;
			grid-template-rows: auto 1fr auto;
			gap: var(--space-medium);
		}
	}

	header,
	nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: var(--space-small);
	}

	/* The stage holds one index card, centered (Derek, 2026-11-12: "create like a card,
	   almost like an index card, and then that will be centered, and that should hold
	   all the content... with that ratio. And then, when we want to see the answer, we
	   flip it over"). The stage is a size container so the card can take the largest
	   index-card box that fits it. */
	.stage {
		display: grid;
		place-items: center;
		min-block-size: 0;
		container-type: size;
		/* The cards slide in and out past the stage's edges; the dialog clips them. */
		overflow: clip;

		/* While Back or Next slides one card out and the next in, both share the one cell. */
		> * {
			grid-area: 1 / 1;
		}
	}

	/* An index card: 5 by 3, as wide as its prompt's line (it wears strong-voice, whose
	   max-width is that measure) - small enough to read as a card on a video call, not a slide
	   (Derek, 2026-11-12: "It's not really like a giant presentation"); smaller still
	   if the stage is; stood on end (3 by 5)
	   when the stage is taller than wide, as on a phone. Both faces share the card's
	   box, so the flip moves nothing; a long answer scrolls inside its face. The faces
	   are the palette's light band (data-emphasis='alternate', set by the script), so
	   the card is paper on the section's dark stage. Transform only - an interaction
	   moment (docs/development/animation-performance.md). */
	study-hall-card {
		display: grid;
		inline-size: min(90cqi, 80cqb * 5 / 3);
		aspect-ratio: 5 / 3;
		transform-style: preserve-3d;
		/* $todo a motion token (none exist yet) */
		transition: transform 0.5s ease-in-out;

		@container (aspect-ratio < 1) {
			inline-size: min(90cqi, 80cqb * 3 / 5);
			aspect-ratio: 3 / 5;
		}

		.face {
			grid-area: 1 / 1;
			display: grid;
			/* The words sit in the middle of the card, where the eye lands; `safe` keeps a
			   long answer from being cut off at the top - it starts there and scrolls. */
			place-content: safe center;
			gap: var(--space-medium);
			min-block-size: 0;
			padding: var(--space-large);
			overflow-y: auto;
			backface-visibility: hidden;
		}

		/* A button on a card (flip, go again) sits under its words, at the start like the text. */
		button {
			justify-self: start;
		}

		.back {
			transform: rotateY(180deg);
		}

		&[data-flipped] {
			transform: rotateY(180deg);
		}

		/* Reduced motion: no turn, a short cross-fade between the faces. */
		@media (prefers-reduced-motion: reduce) {
			transition: none;

			&[data-flipped] {
				transform: none;
			}

			.face {
				transition: opacity 0.2s;
			}

			.back {
				transform: none;
				opacity: 0;
			}

			&[data-flipped] .front {
				opacity: 0;
			}

			&[data-flipped] .back {
				opacity: 1;
			}
		}
	}
}