/* shared/responsive-presentation.css — app-wide short-desktop presentation.

   Width decides the navigation model; height decides how much persistent
   presentation the desktop model can afford. These tiers use the effective CSS
   viewport, never monitor resolution, DPR, display mode or JavaScript state.
   They only change hierarchy and spacing: density, type, focus and control
   target tokens remain owned by the design system. Route styles may consume the
   active custom properties or opt into the semantic tcg-responsive-* roles. */

.tcg-responsive-page {
	--tcg-responsive-page-pad-block: var(--tcg-page-pad-block);
	--tcg-responsive-page-pad-inline: var(--tcg-page-pad-inline);
}

.tcg-responsive-intro {
	margin-block-end: var(--tcg-intro-gap);
}

.tcg-responsive-actions,
.tcg-responsive-tabs {
	gap: var(--tcg-action-gap);
}

.tcg-responsive-section + .tcg-responsive-section {
	margin-block-start: var(--tcg-section-gap);
}

.tcg-responsive-workspace {
	min-height: 0;
}

/* Empty states opt in explicitly. A short window starts the task near the top;
   normal pages keep their authored roomy alignment. */
.tcg-responsive-empty {
	margin-block: var(--tcg-empty-margin-block);
	justify-content: var(--tcg-empty-justify-content);
}

@media (min-width: 1024px) and (max-height: 820px) {
	:root {
		--tcg-page-pad-block: var(--tcg-page-pad-block-short);
		--tcg-page-pad-inline: var(--tcg-page-pad-inline-short);
		--tcg-intro-gap: var(--tcg-intro-gap-short);
		--tcg-section-gap: var(--tcg-section-gap-short);
		--tcg-action-gap: var(--tcg-action-gap-short);
		--tcg-workspace-reserve: var(--tcg-workspace-reserve-short);
		--tcg-primary-content-min-block-size: max(
			calc(240px / var(--ui-scale, 1)),
			calc(50dvh / var(--ui-scale, 1))
		);
		--tcg-empty-margin-block: 0;
		--tcg-empty-justify-content: flex-start;
		--tcg-empty-block-size: auto;
		--tcg-responsive-tier: short;
	}
}

@media (min-width: 1024px) and (max-height: 600px) {
	:root {
		--tcg-page-pad-block: var(--tcg-page-pad-block-very-short);
		--tcg-page-pad-inline: var(--tcg-page-pad-inline-very-short);
		--tcg-intro-gap: var(--tcg-intro-gap-very-short);
		--tcg-section-gap: var(--tcg-section-gap-very-short);
		--tcg-action-gap: var(--tcg-action-gap-very-short);
		--tcg-workspace-reserve: var(--tcg-workspace-reserve-very-short);
		--tcg-responsive-tier: very-short;
	}
}