/*
 * SNAP HUB current — approved mobile canvas contract
 *
 * Historical mobile source contract confirmed from the existing SnapHub mobile
 * implementation: mobile max-width 430px / half-width 215px.
 *
 * All front pages use the approved <=1024px mobile/tablet interaction tier.
 * The same 430px mobile composition is used unchanged through 1024px,
 * including Studio List; 1025px and above remains the PC tier.
 *
 * This stylesheet is linked only by shared pages,
 * keeping page-specific source rules isolated.
 */

:root {
	--mobile-canvas-max: 430px;
	--mobile-canvas-half: 215px;
}

@media (min-width: 431px) and (max-width: 1024px) {
	body.page-home,
	body.page-studio-list,
	body.page-studio-landing,
	body.page-studio-landing-detail,
	body.page-studio-map,
	body.page-studio-detail,
	body.page-studio-register,
	body.page-mypage,
	body.page-license-plate-blur {
		background: var(--mobile-canvas-gutter);
	}

	body.page-guide {
		background: var(--mobile-canvas-gutter);
	}

	body.page-home > .site-header,
	body.page-home > main,
	body.page-home > .site-footer,
	body.page-studio-list > .site-header,
	body.page-studio-list > main,
	body.page-studio-list > .site-footer,
	body.page-studio-landing > .site-header,
	body.page-studio-landing > main,
	body.page-studio-landing > .site-footer,
	body.page-studio-landing-detail > .site-header,
	body.page-studio-landing-detail > main,
	body.page-studio-landing-detail > .site-footer,
	body.page-studio-map > .site-header,
	body.page-studio-map > main,
	body.page-studio-map > .site-footer,
	body.page-studio-detail > .site-header,
	body.page-studio-detail > main,
	body.page-studio-detail > .site-footer,
	body.page-studio-register > .site-header,
	body.page-studio-register > main,
	body.page-studio-register > .site-footer,
	body.page-mypage > .site-header,
	body.page-mypage > main,
	body.page-mypage > .site-footer,
	body.page-license-plate-blur > .site-header,
	body.page-license-plate-blur > main,
	body.page-license-plate-blur > .site-footer,
	body.page-guide > .site-header,
	body.page-guide > .guide-canvas,
	body.page-guide > .site-footer {
		width: var(--mobile-canvas-max);
		max-width: 100%;
		margin-inline: auto;
		box-sizing: border-box;
	}

	/* Keep each page's owned surface inside the mobile canvas. */
	body.page-home > main,
	body.page-studio-list > main,
	body.page-studio-landing > main,
	body.page-studio-landing-detail > main,
	body.page-studio-map > main,
	body.page-studio-detail > main,
	body.page-studio-register > main,
	body.page-mypage > main,
	body.page-guide > .guide-canvas {
		background: #fff;
	}


	/* The plate-blur page intentionally owns alternating white/neutral sections. */
	body.page-license-plate-blur > main {
		background: var(--mobile-canvas-gutter);
	}

	/* Drawer belongs to the same approved mobile canvas on tablet viewports. */
	.mobile-drawer__panel {
		left: 50%;
		right: auto;
		width: var(--mobile-canvas-max);
		max-width: 100%;
		transform: translateX(-50%);
	}

	/* Fixed action rails follow the 430px mobile canvas, not the tablet viewport. */
	body.page-studio-detail .detail-mobile-actions,
	body.page-studio-register .register-mobile-actions {
		left: 50%;
		right: auto;
		width: var(--mobile-canvas-max);
		max-width: 100%;
		transform: translateX(-50%);
	}

	/* Detail gallery stays inside the same mobile visual rail. */
	body.page-studio-detail .detail-gallery-dialog {
		inset-inline: 0;
		width: min(calc(var(--mobile-canvas-max) - 16px), calc(100% - 16px));
		max-width: calc(var(--mobile-canvas-max) - 16px);
		margin-inline: auto;
	}

	/* Fixed TOP controls align to the right edge of the centered mobile canvas. */
	body.page-home .top-button:not(.is-docked),
	body.page-studio-list .top-button:not(.is-docked),
	body.page-studio-landing .top-button:not(.is-docked),
	body.page-studio-landing-detail .top-button:not(.is-docked),
	body.page-studio-map .top-button:not(.is-docked),
	body.page-mypage .top-button:not(.is-docked),
	body.page-license-plate-blur .top-button:not(.is-docked),
	body.page-guide .top-button:not(.is-docked),
	body.page-studio-detail .top-button,
	body.page-studio-detail .top-button.is-docked,
	body.page-studio-register .top-button,
	body.page-studio-register .top-button.is-docked {
		right: calc(50% - var(--mobile-canvas-half) + 19px);
	}

	.skip-link {
		left: calc(50% - var(--mobile-canvas-half) + 12px);
	}
}

@media (min-width: 431px) and (max-width: 1024px) {
	body.page-studio-list > main {
		background: var(--studio-list-bg, #fff);
	}

	body.page-studio-list > .site-header {
		background: var(--primary-hero);
	}
}